jqueryで選択した行を削除する方法-フロントエンドQ&A-php.cn

jqueryで選択した行を削除する方法

PHPz

リリース： 2023-04-06 10:19:34

オリジナル

705 人が閲覧しました

フロントエンド開発では、テーブル内のデータを操作する必要がよく発生します。たとえば、1 つまたは複数の行を削除する必要がある場合があります。 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(); // 删除指定索引的行，注意加一是因为表头占据了第一行
});

ログイン後にコピー

チェックボックスをオンにしてイベントをトリガーする

ボタンでイベントをトリガーする以外に、チェックボックスをオンにしてイベントをトリガーするもう 1 つの一般的な方法があります。この場合、各行の前にチェックボックスを追加し、ユーザーが特定のチェックボックスをオンにすると、削除操作を実行できます。

まず、各行の前にチェックボックスを追加し、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(); // 删除所有勾选了的行
});

ログイン後にコピー

要約すると、上記の 2 つの方法により、テーブル内の指定した行を簡単に削除できます。

以上がjqueryで選択した行を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。