So entfernen Sie ausgewählte Zeilen mit jquery-Front-End-Fragen und Antworten-php.cn

So entfernen Sie ausgewählte Zeilen mit jquery

PHPz

Freigeben： 2023-04-06 10:19:34

Original

705 Leute haben es durchsucht

Bei der Frontend-Entwicklung stoßen wir häufig auf die Notwendigkeit, Daten in Tabellen zu verarbeiten. Beispielsweise müssen wir möglicherweise eine Zeile oder mehrere Zeilen löschen. In jQuery können wir die Methode remove() verwenden, um DOM-Elemente zu löschen, und dann den Selektor verwenden, um das zu löschende Element auszuwählen. Schauen wir uns als Nächstes die spezifische Implementierungsmethode an. remove() 方法来删除 DOM 元素，然后通过选择器来选择我们需要删除的元素。下面，我们就来看看具体的实现方法。

通过按钮触发事件

在 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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

通过勾选复选框触发事件

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

首先，我们需要给每个行前都添加一个复选框，并使用 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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Ereignisse über Schaltflächen auslösen

In HTML können wir eine Schaltfläche hinzufügen und wenn der Benutzer auf die Schaltfläche klickt, können wir eine Löschaktion ausführen. Fügen Sie zunächst der letzten Spalte jeder Zeile in der Tabelle eine Schaltfläche zum Löschen hinzu und fügen Sie der Schaltfläche ein benutzerdefiniertes data-index-Attribut hinzu, das den Indexwert der Zeile identifiziert, in der sich die Schaltfläche befindet.

$(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(); // 删除所有勾选了的行
});

Nach dem Login kopieren

Dann können wir einen Ereignis-Listener für diese Schaltflächen hinzufügen. Wenn auf die Schaltfläche geklickt wird, können wir die entsprechende Zeile basierend auf dem Indexwert der Zeile löschen, in der sich die Schaltfläche befindet: 🎜rrreee

Ereignisse durch Aktivieren von Kontrollkästchen auslösen🎜Neben dem Auslösen von Ereignissen mit Schaltflächen besteht eine weitere gängige Methode darin, Ereignisse durch Aktivieren von Kontrollkästchen auszulösen. In diesem Fall können wir vor jeder Zeile ein Kontrollkästchen hinzufügen. Wenn der Benutzer bestimmte Kontrollkästchen aktiviert, kann der Löschvorgang ausgeführt werden. 🎜🎜Zuerst müssen wir vor jeder Zeile ein Kontrollkästchen hinzufügen und das Attribut data-index verwenden, um den Indexwert der Zeile zu identifizieren, in der sich das Kontrollkästchen befindet: 🎜rrreee🎜Als nächstes fügen wir ein hinzu Klicken Sie in der Tabelle auf das Kontrollkästchen „Alle auswählen“. Wenn dieses Kontrollkästchen aktiviert ist, werden alle Kontrollkästchen vor der Zeile aktiviert. Im Gegenteil: Wenn das Kontrollkästchen „Alle auswählen“ deaktiviert ist, werden auch die Kontrollkästchen vor allen Zeilen deaktiviert. 🎜rrreeerrreee🎜Schließlich fügen wir einen Klick-Ereignis-Listener für die Schaltfläche „Löschen“ hinzu. In diesem Event-Handler rufen wir zunächst die Indexwerte der Zeilen ab, in denen sich alle aktivierten Kontrollkästchen befinden, und verwenden dann die Methode remove(), um diese Zeilen zu löschen. 🎜rrreee🎜Zusammenfassend lässt sich sagen, dass wir mit den beiden oben genannten Methoden die angegebenen Zeilen in der Tabelle problemlos löschen können. 🎜

Das obige ist der detaillierte Inhalt vonSo entfernen Sie ausgewählte Zeilen mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!