使用 Jquery 将行追加到表中

Question

我正在通过以下方式使用 jquery 获取表：

var table = $.fn.dataTable.fnTables(true);

我想在表的最后一行之后追加一行，我试过了：

$("tr", table).after('<tr>...</tr>');

它附加在第一行之后而不是最后一行。

Answer 1

来自 jQuery .append() 文档，

.append() 方法插入指定的内容作为 jQuery 集合中每个元素的最后一个子元素。

在这种情况下，选择表格然后调用 .append('<tr>...</tr>'); 应该可以满足您的需求。

Answer 2

所以看起来您正在使用 jquery 数据表。所以我最初会关闭订购

var table = $('#example').DataTable({
aaSorting: []
});

然后对数据表使用添加行 api。将行添加到底部。

运行下面的小提琴。滚动到底部并单击添加行。

var table = $('#example').DataTable({
aaSorting: []
});

$('#addRowBtn').click(function(event) {
  table.row.add(
   [
    "Ashton Andrew",
      "System Architect",
      "Tokyo",
      "45",
      "2011/04/25",
      "$56,000"
    ]
  ).draw();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
 
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>

  </tbody>
</table>

<button id="addRowBtn">
  add row