Comment supprimer les lignes sélectionnées avec jquery

Dans le développement front-end, nous rencontrons souvent le besoin d'exploiter les données dans des tableaux. Par exemple, nous devrons peut-être supprimer une ou plusieurs lignes. Dans jQuery, nous pouvons utiliser la méthode remove() pour supprimer des éléments DOM, puis utiliser le sélecteur pour sélectionner l'élément que nous devons supprimer. Examinons ensuite la méthode de mise en œuvre spécifique. remove() 方法来删除 DOM 元素，然后通过选择器来选择我们需要删除的元素。下面，我们就来看看具体的实现方法。

1. 通过按钮触发事件

在 HTML 中，我们可以添加一个按钮，当用户点击该按钮时，我们可以执行删除操作。首先，在表格中每一行的最后一列中添加一个删除按钮，并为该按钮添加一个自定义的 data-index 属性，用于标识该按钮所在的行的索引值。

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>22</td>
      <td><button class="btn-delete" data-index="0">删除</button></td>
      </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>25</td>
      <td><button class="btn-delete" data-index="1">删除</button></td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>30</td>
      <td><button class="btn-delete" data-index="2">删除</button></td>
    </tr>
  </tbody>
</table>

然后，我们可以为这些按钮添加一个事件监听器，当按钮被点击时，我们就可以根据该按钮所在行的索引值来删除对应的行：

$(document).on('click', '.btn-delete', function() {
  var index = $(this).attr('data-index');  // 获取该按钮所在行的索引值
  $('#table tr').eq(index + 1).remove(); // 删除指定索引的行，注意加一是因为表头占据了第一行
});

2. 通过勾选复选框触发事件

除了按钮触发事件外，另一个常见的方式就是勾选复选框触发事件。在这种情况下，我们可以在每个行前添加一个复选框，当用户勾选某些复选框后，就可以执行删除操作。

首先，我们需要给每个行前都添加一个复选框，并使用 data-index 属性来标识该复选框所在行的索引值：

<tr>
  <td><input type="checkbox" class="check-item" data-index="0"></td>
  <td>001</td>
  <td>张三</td>
  <td>22</td>
  <td><button class="btn-delete">删除</button></td>
</tr>
<tr>
  <td><input type="checkbox" class="check-item" data-index="1"></td>
  <td>002</td>
  <td>李四</td>
  <td>25</td>
  <td><button class="btn-delete">删除</button></td>
</tr>
<tr>
  <td><input type="checkbox" class="check-item" data-index="2"></td>
  <td>003</td>
  <td>王五</td>
  <td>30</td>
  <td><button class="btn-delete">删除</button></td>
</tr>

接下来，我们为表格添加一个 "全选" 的复选框。当该复选框被勾选时，所有行前的复选框都将被勾选。反之，如果取消 "全选" 复选框的勾选，则所有行前的复选框也将被取消勾选。

<input type="checkbox" id="check-all">全选

$('#check-all').click(function() {
  var isChecked = $(this).prop('checked'); // 获取全选复选框的状态
  $('.check-item').prop('checked', isChecked); // 将所有行前的复选框的状态设置为与全选复选框相同
});

最后，我们为删除按钮添加一个点击事件监听器。在该事件处理函数中，我们首先获取所有勾选了的复选框所在行的索引值，然后使用 remove()

1. Déclenchement d'événements via des boutons

En HTML, nous pouvons ajouter un bouton et lorsque l'utilisateur clique sur le bouton, nous pouvons effectuer une action de suppression. Tout d'abord, ajoutez un bouton de suppression à la dernière colonne de chaque ligne du tableau, puis ajoutez un attribut data-index personnalisé au bouton qui identifie la valeur d'index de la ligne où se trouve le bouton.

$(document).on('click', '.btn-delete', function() {
  var $checkedItems = $('.check-item:checked'); // 获取所有勾选了的复选框
  var indexes = [];
  $checkedItems.each(function() {
    indexes.push($(this).attr('data-index')); // 将每个勾选了的行所在索引值添加到数组中
  });
  $('#table tr').eq(indexes).remove(); // 删除所有勾选了的行
});

Ensuite, nous pouvons ajouter un écouteur d'événement pour ces boutons. Lorsque le bouton est cliqué, nous pouvons supprimer la ligne correspondante en fonction de la valeur d'index de la ligne où se trouve le bouton : 🎜rrreee

Déclenchez des événements en cochant des cases

🎜En plus de déclencher des événements avec des boutons, une autre méthode courante consiste à déclencher des événements en cochant des cases. Dans ce cas, nous pouvons ajouter une case à cocher avant chaque ligne, et lorsque l'utilisateur coche certaines cases, l'opération de suppression peut être effectuée. 🎜🎜Tout d'abord, nous devons ajouter une case à cocher avant chaque ligne et utiliser l'attribut data-index pour identifier la valeur d'index de la ligne où se trouve la case à cocher : 🎜rrreee🎜Ensuite, nous ajoutons un Case à cocher "Sélectionner tout" dans le tableau. Lorsque cette case est cochée, toutes les cases devant la ligne seront cochées. Au contraire, si la case « Sélectionner tout » est décochée, les cases devant toutes les lignes le seront également. 🎜rrreeerrreee🎜Enfin, nous ajoutons un écouteur d'événement de clic pour le bouton de suppression. Dans ce gestionnaire d'événements, nous obtenons d'abord les valeurs d'index des lignes où se trouvent toutes les cases cochées, puis utilisons la méthode remove() pour supprimer ces lignes. 🎜rrreee🎜En résumé, grâce aux deux méthodes ci-dessus, nous pouvons facilement supprimer les lignes spécifiées dans le 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!