jquery ajoute des lignes au tableau

jQuery est une bibliothèque JavaScript efficace et concise qui peut grandement simplifier la programmation JavaScript. Pour les développeurs Web, nous avons souvent besoin d'étendre le tableau HTML (Tableau) en ajoutant de nouvelles lignes. Alors, comment ajouter des lignes au tableau via jQuery ? Apprenons ensuite comment utiliser jQuery pour ajouter des lignes au tableau.

1. Définissez le tableau en HTML

Tout d'abord, définissez le tableau dont nous avons besoin sur la page HTML. Comme indiqué ci-dessous :

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2. Ajoutez une nouvelle ligne

Ensuite, ajoutez une nouvelle ligne dans jQuery. Nous pouvons ajouter de nouvelles lignes en créant un élément tr contenant un élément td. Comme indiqué ci-dessous :

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

Ici, nous utilisons le sélecteur jQuery pour sélectionner le corps de la table, puis appelons la fonction append pour ajouter une nouvelle ligne dans le corps. La ligne ajoutée est un élément tr contenant trois cellules, chacune contenant une valeur. Vous pouvez voir que nous avons ajouté une ligne au tableau en utilisant jQuery.

3. Ajouter plusieurs lignes via une boucle

Parfois, nous devons ajouter plusieurs lignes au tableau via une boucle. Nous pouvons utiliser la boucle JavaScript pour ajouter plusieurs lignes. Comme indiqué ci-dessous :

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

Ici, nous utilisons une boucle for pour boucler 10 fois, en ajoutant à chaque fois une ligne au tbody via la fonction append. Nous pouvons utiliser la concaténation de chaînes pour définir la valeur de chaque cellule et utiliser la variable i pour rendre la valeur de chaque cellule unique.

4. Insérer une ligne à une position spécifiée

Parfois, nous devons ajouter une nouvelle ligne à une position spécifique du tableau. À ce stade, nous devons spécifier l'emplacement spécifique où la nouvelle ligne doit être insérée. Comme indiqué ci-dessous :

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

Ici, nous définissons une nouvelle ligne newRow et sélectionnons la 2ème ligne targetRow dans le tableau via le sélecteur.

Ensuite, nous utilisons la fonction before pour ajouter la nouvelle ligne avant targetRow.

Il est à noter que si targetRow n'existe pas, la nouvelle ligne ne sera pas insérée. Si vous souhaitez ajouter des lignes après la deuxième ligne, vous pouvez utiliser la fonction after au lieu de la fonction before.

Résumé

Voici les trois façons dont nous utilisons jQuery pour ajouter des lignes au tableau. Nous pouvons ajouter de nouvelles lignes via la fonction append, ajouter plusieurs lignes via une boucle ou insérer de nouvelles lignes à une position spécifique. En utilisant jQuery, nous pouvons étendre rapidement et facilement les tableaux HTML et rendre le site Web plus puissant et plus complet.

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!