Comment faire changer le numéro de série de la table en ajoutant automatiquement des lignes dans jquery

La façon dont jquery implémente le numéro de série de la table pour changer avec l'ajout automatique de lignes est la suivante : 1. Créez un fichier html et introduisez le fichier jQuery ; 2. Utilisez la balise "table" pour créer une table avec la valeur d'identifiant "myTable". "; 3. Utilisé dans le plug-in de code jQuery "DataTables" pour gérer la table ; 4. Écoutez ensuite l'événement d'ajout de ligne et l'événement de suppression de ligne, et appelez la méthode `draw(false)` pour dessiner, puis utilisez `updateRowIds` pour mettre à jour le numéro de série.

Le système d'exploitation de ce tutoriel : système Windows 10, jQuery version 3.6.0, ordinateur Dell G3.

La méthode jquery pour implémenter les changements de numéro de série de table avec l'ajout automatique de lignes est :

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

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

Tout d'abord, en HTML, nous avons une table avec l'ID `myTable`, qui contient trois colonnes : ID, Nom et Âge.

Dans le code jQuery, nous utilisons le plugin DataTables pour gérer les tables. Dans la fonction `ready`, nous initialisons l'instance DataTables et la stockons dans la variable `table`.

Ensuite, nous avons écouté l'événement d'ajout de ligne et l'événement de suppression de ligne. Lorsque l'utilisateur clique sur le bouton Ajouter, nous ajouterons une ligne à l'instance DataTables et appellerons immédiatement la méthode `draw(false)` pour dessiner (le paramètre false transmis lors de l'exécution de cette méthode signifie que la table ne sera pas réorganisée), puis utilisez `updateRowIds` Mettez simplement à jour le numéro de série.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!