Bagaimana untuk mengalih keluar baris yang dipilih dengan jquery

Dalam pembangunan bahagian hadapan, kami sering menghadapi keperluan untuk mengendalikan data dalam jadual. Sebagai contoh, kita mungkin perlu memadam satu baris atau berbilang baris. Dalam jQuery, kita boleh menggunakan kaedah remove() untuk memadamkan elemen DOM, dan kemudian pilih elemen yang perlu kita padamkan melalui pemilih. Seterusnya, mari kita lihat kaedah pelaksanaan khusus.

1. Mencetuskan peristiwa melalui butang

Dalam HTML, kita boleh menambah butang dan apabila pengguna mengklik butang itu, kita boleh melakukan tindakan padam. Mula-mula, tambahkan butang padam pada lajur terakhir setiap baris dalam jadual dan tambahkan atribut data-index tersuai pada butang yang mengenal pasti nilai indeks baris di mana butang itu terletak.

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

Kemudian, kita boleh menambah pendengar acara untuk butang ini Apabila butang diklik, kita boleh memadamkan baris yang sepadan berdasarkan nilai indeks baris di mana butang itu terletak:

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

2. Cetuskan acara dengan menandai kotak pilihan

Selain acara pencetus butang, satu lagi cara biasa ialah menandai kotak pilihan untuk mencetuskan acara. Dalam kes ini, kami boleh menambah kotak pilihan sebelum setiap baris, dan apabila pengguna menyemak kotak pilihan tertentu, operasi pemadaman boleh dilakukan.

Pertama, kita perlu menambah kotak pilihan sebelum setiap baris dan menggunakan atribut data-index untuk mengenal pasti nilai indeks baris di mana kotak pilihan terletak:

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

Teruskan Seterusnya, kami menambah kotak semak "Pilih Semua" pada jadual. Apabila kotak semak ini ditandakan, semua kotak pilihan di hadapan baris akan ditandakan. Sebaliknya, jika kotak pilihan "Pilih Semua" dinyahtandai, kotak pilihan di hadapan semua baris juga akan dinyahtandai.

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

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

Akhir sekali, kami menambah pendengar acara klik untuk butang padam. Dalam pengendali acara ini, kami mula-mula mendapatkan nilai indeks baris yang menempatkan semua kotak semak yang ditandai, dan kemudian gunakan kaedah remove() untuk memadamkan baris ini.

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

Ringkasnya, melalui dua kaedah di atas, kita boleh memadamkan baris yang ditentukan dalam jadual dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar baris yang dipilih dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!