Maison > interface Web > Questions et réponses frontales > jquery ajoute des lignes au tableau

jquery ajoute des lignes au tableau

王林
Libérer: 2023-05-25 10:53:08
original
1125 Les gens l'ont consulté

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

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

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

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

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!

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