jquery를 사용하여 선택한 행을 제거하는 방법-프런트엔드 Q&A-php.cn

jquery를 사용하여 선택한 행을 제거하는 방법

PHPz

풀어 주다： 2023-04-06 10:19:34

원래의

705명이 탐색했습니다.

在前端开发中，我们经常会遇到需要对表格中的数据进行操作的需求。例如，我们可能需要删除某个行或者多个行。在 jQuery 中，我们可以使用 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>

로그인 후 복사

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

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

로그인 후 복사

通过勾选复选框触发事件

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

首先，我们需要给每个行前都添加一个复选框，并使用 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() 方法将这些行删除。

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

로그인 후 복사

综上所述，通过以上两种方式，我们可以很方便地实现删除表格中指定的行。

위 내용은 jquery를 사용하여 선택한 행을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!