Apprenez rapidement à ajouter une ligne à un tableau à l'aide de jQuery

jQuery est une bibliothèque JavaScript populaire largement utilisée pour simplifier le développement Web. L'utilisation de jQuery dans les pages Web peut rendre le code plus concis, plus facile à maintenir et réaliser de nombreuses fonctions complexes. Cet article vous apprendra comment utiliser jQuery pour ajouter rapidement une ligne à un tableau, vous permettant ainsi de gérer facilement l'ajout de données de tableau.

Tout d'abord, nous supposons que vous comprenez déjà la syntaxe de base de jQuery et comment introduire la bibliothèque jQuery dans une page Web. Si vous n'êtes pas encore familier avec jQuery, apprenez quelques bases avant d'expérimenter cet exemple.

Ensuite, nous utilisons un cas spécifique pour montrer comment utiliser jQuery pour ajouter une ligne au tableau. Supposons que nous ayons un tableau simple contenant deux colonnes de données : nom et âge, comme indiqué ci-dessous :

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

Maintenant, nous souhaitons implémenter une fonction qui ajoute une ligne de données à la fin du tableau après avoir cliqué sur un bouton. Tout d'abord, ajoutez un bouton à la page Lorsque vous cliquez sur le bouton, l'opération d'ajout de ligne est déclenchée. Le code est le suivant :

<button id="addRowBtn">添加行</button>

Ensuite, nous utilisons jQuery pour implémenter la fonction d'ajout de lignes. Introduisez d'abord la bibliothèque jQuery dans la page :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ensuite, ajoutez du code jQuery en bas de la page pour implémenter la fonction d'ajout de lignes :

$(document).ready(function() {
  // 点击按钮触发添加行操作
  $('#addRowBtn').click(function() {
    // 在表格末尾添加一行
    $('#myTable').append('<tr><td>王五</td><td>35</td></tr>');
  });
});

Dans le code ci-dessus, nous utilisons l'élément $('#addRowBtn')来选中按钮元素，然后使用.click()方法来为按钮添加点击事件。点击按钮时，执行回调函数，在函数中使用$('#myTable')选中表格，然后使用.append()方法在表格末尾添加一行新的<tr> et remplissons les données. <p>Vous pouvez maintenant ouvrir la page dans le navigateur, cliquer sur le bouton et vous verrez une nouvelle ligne de données ajoutée au tableau. De cette façon, il est possible d'utiliser jQuery pour ajouter une ligne au tableau. </p> <p>En général, l'ajout d'une ligne à un tableau à l'aide de jQuery ne nécessite que quelques lignes de code simple. Les sélecteurs et les méthodes de fonctionnement de jQuery rendent le traitement des éléments DOM très pratique et efficace, nous permettant d'utiliser facilement divers éléments dans les pages Web. J'espère que cet exemple vous sera utile et j'espère que vous pourrez continuer à apprendre jQuery et d'autres technologies frontales et améliorer continuellement vos compétences. </p> </tr>

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!