Maison >interface Web >js tutoriel >Conseils jQuery : insérer dynamiquement de nouvelles lignes dans un tableau
Conseils jQuery : insérer dynamiquement de nouvelles lignes dans un tableau
- PHPzoriginal
- 2024-02-28 11:51:03779parcourir
Titre : Astuces jQuery : Insérer dynamiquement de nouvelles lignes dans des tableaux
Dans le développement Web, il est souvent nécessaire d'insérer dynamiquement de nouvelles lignes dans des tableaux. Cette fonction peut être implémentée très simplement à l'aide de jQuery. Ce qui suit explique comment utiliser jQuery pour insérer dynamiquement de nouvelles lignes dans la table et fournit des exemples de code spécifiques.
Tout d'abord, assurez-vous que la bibliothèque jQuery est introduite dans le fichier HTML, soit via un lien CDN, soit via un fichier local. Ci-dessous se trouve une structure HTML simple contenant un tableau et un bouton :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态在表格中插入新的行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Age</th> </tr> </table> <button id="addRowBtn">新增行</button> </body> </html>
Ensuite, nous devons écrire du code jQuery pour insérer une nouvelle ligne dans le tableau lorsque vous cliquez sur le bouton. Le code est le suivant :
$(document).ready(function() {
$('#addRowBtn').click(function() {
var name = prompt('请输入姓名：');
var age = prompt('请输入年龄：');
var newRow = '<tr><td>' + name + '</td><td>' + age + '</td></tr>';
$('#myTable').append(newRow);
});
});Dans le code ci-dessus, nous lions d'abord l'événement click du bouton après le chargement du document. Lorsque vous cliquez sur le bouton, deux boîtes de dialogue apparaissent pour saisir respectivement le nom et l'âge, ainsi que le nom. les valeurs saisies sont regroupées dans le code HTML dans une nouvelle ligne du tableau. Enfin, utilisez la méthode append() de jQuery pour insérer la nouvelle ligne dans le tableau.
Maintenant, nous avons terminé la fonction d'insertion dynamique de nouvelles lignes dans le tableau. Vous pouvez copier et coller le code HTML et jQuery ci-dessus dans un fichier HTML, l'ouvrir dans le navigateur et cliquer sur le bouton pour tester l'effet. Grâce à cet exemple, j'espère qu'il pourra vous aider à apprendre à utiliser jQuery pour insérer dynamiquement de nouvelles lignes dans un tableau.
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!