Bagaimanakah jquery menyedari bahawa nombor siri jadual berubah dengan penambahan baris secara automatik?

Cara jquery melaksanakan nombor siri jadual untuk menukar dengan penambahan baris secara automatik ialah: 1. Buat fail html dan perkenalkan fail jQuery 2. Gunakan tag "jadual" untuk mencipta jadual dengan nilai id "myTable"; 3. jQuery Pemalam "DataTables" digunakan dalam kod untuk menguruskan jadual 4. Kemudian dengar acara tambah baris dan padamkan acara baris, dan panggil kaedah `draw(false)`; untuk melukis, dan kemudian gunakan `updateRowIds` untuk mengemas kini nombor siri.

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.0, komputer Dell G3.

Cara jquery melaksanakan nombor siri jadual untuk berubah dengan penambahan baris automatik ialah:

Kod 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>

kod 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);
        });
    }
});

Pertama, dalam HTML , kami mempunyai jadual dengan ID `myTable`, yang mengandungi tiga lajur: ID, Nama dan Umur.

Dalam kod jQuery, kami menggunakan pemalam DataTables untuk mengurus jadual. Dalam fungsi `sedia`, kami memulakan tika DataTables dan menyimpannya dalam pembolehubah `jadual`.

Kemudian, kami mendengar acara tambah baris dan padamkan acara baris. Apabila pengguna mengklik butang tambah, kami akan menambah satu baris pada contoh DataTables dan segera memanggil kaedah `draw(false)` untuk melukis (parameter palsu yang dihantar semasa menjalankan kaedah ini bermakna jadual tidak akan disusun semula), dan kemudian gunakan `updateRowIds `Hanya kemas kini nombor siri.

Atas ialah kandungan terperinci Bagaimanakah jquery menyedari bahawa nombor siri jadual berubah dengan penambahan baris secara automatik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!