jquery實作表格序號隨自動增加行變化的方法是：1、建立html檔並引入jQuery檔；2、使用「table」標籤建立表格id值為「myTable」；3、 jQuery程式碼中使用了「DataTables」外掛程式來管理表格；4、然後監聽新增行事件和刪除行事件，並呼叫`draw(false)` 方法進行繪製，接著使用`updateRowIds`更新序號即可。
本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。
jquery實作表格序號隨自動增加行變化的方法是：
HTML 程式碼：
| ID | Name | Age |
|---|---|---|
| 1 | John | 25 |
| 2 | Jane | 30 |
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中文網其他相關文章！
