Maison > Article > interface Web > jquery supprime quatre lignes de données dans le tableau

jquery supprime quatre lignes de données dans le tableau

WBOYoriginal: 2023-05-23 16:02:08505parcourir

Dans les applications Web, les tableaux sont un élément d'interface très courant et important. Les lignes et les colonnes des tableaux sont utilisées pour afficher des données ou fournir des options de menu. Cependant, nous devons parfois supprimer certaines lignes de données du tableau, par exemple lorsque l'utilisateur effectue une opération de suppression. Cet article explique comment utiliser jQuery pour supprimer quatre lignes de données dans un tableau.

Étape 1 : Créer un tableau HTML

La première chose à faire est de créer un tableau HTML afin de pouvoir utiliser jQuery pour supprimer les quatre lignes de données du tableau. Le code HTML est le suivant :

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>23</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Ce tableau contient un en-tête et 6 lignes de données dont chacune contient trois colonnes de données : nom, âge et sexe. Notre objectif est de supprimer les quatre premières lignes de données du tableau.

Étape 2 : Utilisez jQuery pour sélectionner les lignes de données à supprimer

Afin de supprimer les quatre premières lignes de données du tableau, nous devons utiliser le sélecteur jQuery pour sélectionner ces quatre lignes de données. Le code est le suivant :

var rowsToDelete = $('#myTable tbody tr:lt(4)');

Cette ligne de code utilise une méthode d'appel en chaîne. Tout d'abord, utilisez $('#myTable') pour sélectionner la table, puis utilisez :lt(. 4) Les quatre premières lignes de données sont sélectionnées, et enfin toutes les lignes de données sont sélectionnées via tbody tr. De cette façon, la variable rowsToDelete contient toutes les données de ligne qui doivent être supprimées. $('#myTable')选中了表格，然后通过:lt(4)选中了前四行数据，最后通过tbody tr选中了所有的行数据。这样rowsToDelete变量就是所有需要删除的行数据。

步骤三：使用jQuery删除选中的行数据

有了选中的表格行数据，我们就可以使用jQuery删除这些行了。代码如下：

rowsToDelete.remove();

这一行简单的代码使用了jQuery的remove()

Étape 3 : Utilisez jQuery pour supprimer les données de ligne sélectionnées

Avec les données de ligne de tableau sélectionnées, nous pouvons utiliser jQuery pour supprimer ces lignes. Le code est le suivant :

console.log($('#myTable tbody tr'));

Cette simple ligne de code utilise la méthode remove() de jQuery pour supprimer les données des lignes de tableau sélectionnées.

Étape 4 : Vérifier le résultat de la suppression

Afin de vérifier si les quatre premières lignes de données ont été supprimées avec succès, nous pouvons utiliser le code suivant pour afficher les données de la table sur la console :

<html>
  <head>
    <title>jQuery删除表格四行数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        var rowsToDelete = $('#myTable tbody tr:lt(4)');
        rowsToDelete.remove();
        console.log($('#myTable tbody tr'));
      });
    </script>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>男</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>28</td>
          <td>女</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>35</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>26</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Si les quatre premières lignes des données ont été supprimées avec succès, la console seules les deux dernières lignes de données seront affichées. 🎜🎜Le code complet est le suivant : 🎜rrreee🎜Les extraits de code fournis dans cet article peuvent être utilisés comme base pour apprendre à jQuery pour supprimer les opérations de données de lignes de tableau. Les lecteurs peuvent modifier le code en fonction des besoins réels pour s'adapter à leur propre application. scénarios. 🎜

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!

jquery html 选择器 tbody tr

Déclaration：

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

Article précédent：utilisation des variables de définition jqueryArticle suivant：utilisation des variables de définition jquery

Articles Liés

Voir plus