0

I have now read this thread several times: Add table row in jQuery .... and still don't understand why I can't append to a row that I just created:

var row = $('#sitesTable').append('<tr/>');
        row.append($('<td align="left"/>').text(k));
        row.append($('<td align="center"/>').text(v.length));

This simply creates an empty tr tag without appending to it:

<table class="sitesTable" id="sitesTable">
<tr></tr>
<th align="left">Site</th>
<th align="right">Total</th>
...

I appreciate any assistance, as this is starting to drive me nuts.

JeffMinsungKim
  • 1,940
  • 7
  • 27
  • 50
Xvs
  • 79
  • 2
  • 9

1 Answers1

2

Because var row = $('#sitesTable').append('<tr/>'); returns a reference to the table not the newly created row

you can use

var row = $('<tr/>').appendTo('#sitesTable');


var row = $('<tr/>').appendTo('#sitesTable');
$('<td align="left"/>').text('col-1').appendTo(row);
$('<td align="center"/>').text('col-2').appendTo(row);
// I prefer the above format for readability
//row.append($('<td align="left"/>').text('col-1'));
//row.append($('<td align="center"/>').text('col-2'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="sitesTable" id="sitesTable">
  <tr>
    <th align="left">Site</th>
    <th align="right">Total</th>
  </tr>
</table>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531