Maison > Problème commun > Comment faire changer le numéro de série de la table en ajoutant automatiquement des lignes dans jquery

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

尊渡假赌尊渡假赌尊渡假赌
Libérer: 2023-06-09 16:50:28
original
1365 Les gens l'ont consulté

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.

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

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>
Copier après la connexion

Code 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);
        });
    }
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal