jqueryは、行の自動追加によってテーブルのシリアル番号が変更されることをどのように認識しますか?

行の自動追加によってテーブルのシリアル番号が変更されることを実現するための jQuery メソッドは次のとおりです: 1. HTML ファイルを作成し、jQuery ファイルを導入します; 2. 「table」タグを使用してテーブルを作成します。 id value "myTable"; 3. jQuery "DataTables" プラグインは、テーブルを管理するコードで使用されます; 4. 次に、行追加イベントと行削除イベントをリッスンし、`draw(false)` メソッドを呼び出します描画してから、「updateRowIds」を使用してシリアル番号を更新します。

このチュートリアルのオペレーティング システム: Windows 10 システム、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、Name、Age の 3 つの列を含む ID `myTable` を持つテーブルがあります。

jQuery コードでは、DataTables プラグインを使用してテーブルを管理します。 「ready」関数では、DataTables インスタンスを初期化し、それを「table」変数に保存します。

次に、行追加イベントと行削除イベントをリッスンしました。ユーザーが追加ボタンをクリックすると、DataTables インスタンスに行を追加し、すぐに `draw(false)` メソッドを呼び出して描画します (このメソッドの実行時に渡されるパラメーター false は、テーブルが再配置されないことを意味します)。次に、「updateRowIds」を使用してシリアル番号を更新するだけです。

以上がjqueryは、行の自動追加によってテーブルのシリアル番号が変更されることをどのように認識しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。