javascript - 在jquery中添加到表行

Question

我现在已多次阅读此主题:Add table row in jQuery ....并且仍然不明白为什么我无法附加到我刚刚创建的行:

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

这只是创建一个空的 tr 标签而不附加到它:

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

我感谢任何帮助，因为这开始让我发疯。

Answer 1

因为var row = $('#sitesTable').append('<tr/>');返回对表的引用，而不是新创建的行

你可以使用

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>