使用 Jquery 将行附加到表

debugcn 发表于 Dev

用户1692342

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

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

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

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

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

布莱恩·德林格

所以看起来您正在使用 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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。