Wie erkennt jquery, dass sich die Tabellenseriennummer beim automatischen Hinzufügen von Zeilen ändert?

Jquery erkennt, dass sich die Seriennummer der Tabelle beim automatischen Hinzufügen von Zeilen ändert: 1. Erstellen Sie eine HTML-Datei und führen Sie die jQuery-Datei ein. 2. Verwenden Sie das Tag „table“, um eine Tabelle mit dem ID-Wert „myTable“ zu erstellen "; 3. Wird im jQuery-Code-Plugin „DataTables" zum Verwalten der Tabelle verwendet; 4. Hören Sie sich dann das Ereignis „Zeile hinzufügen“ und das Ereignis „Zeile löschen“ an und rufen Sie die Methode „draw(false)“ zum Zeichnen auf und verwenden Sie sie dann „updateRowIds“, um die Seriennummer zu aktualisieren.

Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.0, Dell G3-Computer.

Die JQuery-Methode zum Implementieren der Änderungen der Tabellenseriennummer mit dem automatischen Hinzufügen von Zeilen lautet:

HTML-Code:

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

jAbfragecode:

$(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);
        });
    }
});

Zunächst haben wir in HTML eine Tabelle mit der ID „myTable“, die drei Spalten enthält: ID, Name und Alter.

Im jQuery-Code verwenden wir das DataTables-Plugin zum Verwalten von Tabellen. In der Funktion „ready“ initialisieren wir die DataTables-Instanz und speichern sie in der Variablen „table“.

Dann haben wir uns das Ereignis „Zeile hinzufügen“ und das Ereignis „Zeile löschen“ angehört. Wenn der Benutzer auf die Schaltfläche „Hinzufügen“ klickt, fügen wir der DataTables-Instanz eine Zeile hinzu und rufen sofort die Methode „draw(false)“ zum Zeichnen auf (der beim Ausführen dieser Methode übergebene Parameter „false“ bedeutet, dass die Tabelle nicht neu angeordnet wird). und verwenden Sie dann „updateRowIds“. Aktualisieren Sie einfach die Seriennummer.

Das obige ist der detaillierte Inhalt vonWie erkennt jquery, dass sich die Tabellenseriennummer beim automatischen Hinzufügen von Zeilen ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!