0

Using jQuery in a SharePoint environment, I am trying to append an object property as a last column of a table.

I am using the following JavaScript:

  var id = ctx.CurrentItem.ID; //Gets IDs for items in list
  console.log(id);
  $(".ms-vb-lastCell").append("<td role='gridcell' class='ms-vb-cellstyle ms-vb2'>" + id + "<td>")

The DOM tree for a table row:

<tbody>
  <tr class=" ms-itmHoverEnabled ms-itmhover" oncontextmenu="return ShowCallOutOrECBWrapper(this, event, false)" iid="244,1,0" id="244,1,0" role="row">
    <!--iid and id are dynamically generated on load-->
    <td role="gridcell" class="ms-cellstyle ms-vb2">Completed</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">(2) Normal</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2"><span class="ms-noWrap" title="3/30/2018">3/30/2018</span></td>
    <td role="gridcell" class="ms-vb-lastCell ms-cellstyle ms-vb2">
      <div style="background: #F3F3F3; display:block; height: 15px; width: 120px;">
        <div style="background: #00539B; height: 100%; width: 100%;"></div>
      </div> 100 %
    </td>
  </tr>
</tbody>

How can I append each items id to the last td in each row.

cfoster5
  • 1,696
  • 5
  • 28
  • 42
  • Try referencing this answer: https://stackoverflow.com/questions/171027/add-table-row-in-jquery – Tokiin Mar 19 '18 at 19:38
  • Closing `` typo. You have just ``. Also, `append` will put content inside selected item. You can't put `td` inside `td`. Use `after` for this case. – Alex Yokisama Mar 19 '18 at 22:26
  • What are you trying to achieve ? showing a list's data in as a table ? can you check your html as you are trying to put td inside td tag – Guruparan Giritharan Mar 20 '18 at 03:35

1 Answers1

0

You can try looping in each tr then call append on that tr object.

lem.mallari
  • 1,274
  • 12
  • 25