时间戳

首页 > 解决方案 > 在第一行之后插入

jquery - 在第一行之后插入

问题描述

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

<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'）。有没有办法做到这一点？

标签： jquery

解决方案

为此，您可以使用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>

推荐阅读