首頁  >  文章  >  jquery怎麼實現表格序號隨自動增加行變化

jquery怎麼實現表格序號隨自動增加行變化

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原創
2023-06-09 16:50:281330瀏覽

jquery實作表格序號隨自動增加行變化的方法是:1、建立html檔並引入jQuery檔;2、使用「table」標籤建立表格id值為「myTable」;3、 jQuery程式碼中使用了「DataTables」外掛程式來管理表格;4、然後監聽新增行事件和刪除行事件,並呼叫`draw(false)` 方法進行繪製,接著使用`updateRowIds`更新序號即可。

jquery怎麼實現表格序號隨自動增加行變化

本教學作業系統: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 = $(&#39;#myTable&#39;).DataTable();
    // 监听添加行事件
    $(&#39;#addRowBtn&#39;).on(&#39;click&#39;, function() {
        table.row.add([
            &#39;&#39;, // 空序号,插入后由函数进行自动编号
            &#39;&#39;,
            &#39;&#39;
        ]).draw(false);
        updateRowIds();
    });
    // 监听删除行事件
    $(&#39;#myTable tbody&#39;).on(&#39;click&#39;, &#39;.deleteRowBtn&#39;, function() {
        table
            .row($(this).parents(&#39;tr&#39;))
            .remove()
            .draw();
        updateRowIds();
    });
    // 更新序号字段值
    function updateRowIds() {
        $(&#39;#myTable tbody tr&#39;).each(function(index, row) {
            $(row).find(&#39;td:first-child&#39;).text(index + 1);
        });
    }
});

首先,在HTML 中,我們有一個帶有ID `myTable` 的表格,包含了三個欄位:ID、Name 和Age。

在 jQuery 程式碼中,我們使用了 DataTables 外掛程式來管理表格。在 `ready` 函數中,我們初始化 DataTables 實例並將其儲存在 `table` 變數中。

然後,我們監聽了新增行事件和刪除行事件。當使用者點擊新增按鈕時,我們會在DataTables 實例中新增一行,並立即呼叫`draw(false)` 方法進行繪製(執行該方法時傳入的參數false 表示不對表格進行重排),接著使用`updateRowIds `更新序號即可。

以上是jquery怎麼實現表格序號隨自動增加行變化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:nfc是什麼意思下一篇:nfc是什麼意思