jquery實作表格序號隨自動增加行變化的方法是:1、建立html檔並引入jQuery檔;2、使用「table」標籤建立表格id值為「myTable」;3、 jQuery程式碼中使用了「DataTables」外掛程式來管理表格;4、然後監聽新增行事件和刪除行事件,並呼叫`draw(false)` 方法進行繪製,接著使用`updateRowIds`更新序號即可。
本教學作業系統:Windows10系統、jQuery3.6.0版本、Dell G3電腦。
jquery實作表格序號隨自動增加行變化的方法是:
HTML 程式碼:
<table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>25</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>30</td> </tr> </tbody> </table>
jQuery 程式碼:
$(document).ready(function() { var table = $('#myTable').DataTable(); // 监听添加行事件 $('#addRowBtn').on('click', function() { table.row.add([ '', // 空序号,插入后由函数进行自动编号 '', '' ]).draw(false); updateRowIds(); }); // 监听删除行事件 $('#myTable tbody').on('click', '.deleteRowBtn', function() { table .row($(this).parents('tr')) .remove() .draw(); updateRowIds(); }); // 更新序号字段值 function updateRowIds() { $('#myTable tbody tr').each(function(index, row) { $(row).find('td:first-child').text(index + 1); }); } });
首先,在HTML 中,我們有一個帶有ID `myTable` 的表格,包含了三個欄位:ID、Name 和Age。
在 jQuery 程式碼中,我們使用了 DataTables 外掛程式來管理表格。在 `ready` 函數中,我們初始化 DataTables 實例並將其儲存在 `table` 變數中。
然後,我們監聽了新增行事件和刪除行事件。當使用者點擊新增按鈕時,我們會在DataTables 實例中新增一行,並立即呼叫`draw(false)` 方法進行繪製(執行該方法時傳入的參數false 表示不對表格進行重排),接著使用`updateRowIds `更新序號即可。
以上是jquery怎麼實現表格序號隨自動增加行變化的詳細內容。更多資訊請關注PHP中文網其他相關文章!