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!