如何将新<tr>元素插入到表格含<th>的首行之后？

要把生成的<tr>插入到带<th>的表头行之后，只需要调整代码里的插入方式，精准定位到表头行的位置即可。

修改后的代码： #

var $tr = $('<tr class="row alert-message">').append(
  $('<td>').html(proNumber),
  $('<td>').html(originName+' / '+originState),
  $('<td>').html(consigneeName+' / '+consigneeState),
  $('<td>').text(month+" "+day+", "+year),
  $('<td>').html('<input type="checkbox" class="batchCheckboxTransfer" name="batch[]" data-id="'+shipmentID+'" value="">')
).insertAfter('#manifestItemsTable tbody tr:first');

原理说明： #

• 你原来的.appendTo('#manifestItemsTable')会把新行添加到表格的末尾（也就是tbody的最后位置）。
• $('#manifestItemsTable tbody tr:first')能精准选中表格里的第一个<tr>——也就是包含<th>的表头行，完全匹配你的表格结构。
• .insertAfter()方法会把创建好的<tr>插入到指定元素的紧后面，刚好满足你要放在表头行之后的需求。

另一种等价写法（更清晰的分步模式）： #

如果你习惯把创建和插入分开写，也可以这么做：

// 第一步：先创建好要插入的行元素
var $tr = $('<tr class="row alert-message">').append(
  $('<td>').html(proNumber),
  $('<td>').html(originName+' / '+originState),
  $('<td>').html(consigneeName+' / '+consigneeState),
  $('<td>').text(month+" "+day+", "+year),
  $('<td>').html('<input type="checkbox" class="batchCheckboxTransfer" name="batch[]" data-id="'+shipmentID+'" value="">')
);

// 第二步：把行插入到表头行之后
$('#manifestItemsTable tbody tr:first').after($tr);

这两种写法效果完全一致，选你觉得更易读的就行。

内容的提问来源于stack exchange，提问作者Matthew