使用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: []
});

然后使用add row api作为数据表。将行添加到底部。

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;