Question

目前我有一个相对简单的表，如下所示：

<table class="table table-striped" id="manifestItemsTable">
    <tbody>
        <tr>
            <th></th>
            <th>PRO No.</th>
            <th>Origin / City</th>
            <th>Destination / City</th>
            <th>Due</th>
            <th>Transf?</th>
            <th></th>
        </tr>
    </tbody>
</table>

我有以下代码，这是一个更大的脚本的一部分，但已经削减到相关部分。

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="">')
).appendTo('#manifestItemsTable');

我想要的是在上面已经设置的第一行（内部带有'th'）之后立即追加。有没有办法做到这一点？

Answer 1

要实现此目的，您可以使用insertAfter()并为表格中的第一个tr提供选择器：

$('button').click(function() {
  var $tr = $('<tr class="row alert-message">').append(
    $('<td>').html((new Date()).getTime()),
    $('<td>').html('oName/oState'),
    $('<td>').html('cName/cState'),
    $('<td>').text('mdy'),
    $('<td>').html('<input type="checkbox" class="batchCheckboxTransfer" name="batch[]" data-id="shipmentId" value="">')
  ).insertAfter('#manifestItemsTable tr:first');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Append</button>

<table class="table table-striped" id="manifestItemsTable">
  <tbody>
    <tr>
      <th></th>
      <th>PRO No.</th>
      <th>Origin / City</th>
      <th>Destination / City</th>
      <th>Due</th>
      <th>Transf?</th>
      <th></th>
    </tr>
  </tbody>
</table>

插入第一行后

1 个答案: