jadual jquery memadamkan baris data secara dinamik

Apabila membangunkan aplikasi web, jadual data ialah komponen biasa, biasanya digunakan untuk memaparkan data. Walau bagaimanapun, kadangkala kita perlu memadamkan baris data tertentu dari jadual, dan sangat mudah untuk menggunakan jQuery untuk mencapai fungsi ini.

Dalam jQuery, kami biasanya menggunakan kaedah remove() untuk memadamkan elemen DOM. Oleh itu, apabila memadamkan baris data dalam jadual, kita perlu terlebih dahulu mendapatkan elemen DOM baris ini dan kemudian menggunakan kaedah remove() untuk mengalih keluarnya daripada jadual.

Mula-mula, mari kita lihat cara mendapatkan baris data dalam jadual. Katakan kita mempunyai jadual di mana setiap baris mempunyai butang padam dan apabila pengguna mengklik butang padam kita perlu memadamkan baris itu daripada jadual. Berikut ialah kod HTML untuk jadual contoh:

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

Dalam jadual ini, setiap baris mengandungi tiga sel, yang terakhir mengandungi butang bernama "Padam". Sekarang, kita boleh menggunakan jQuery untuk menambah pengendali acara klik pada setiap butang padam untuk memadam baris yang sepadan. Berikut ialah kod pelaksanaan:

$(document).ready(function() {
  // 添加点击事件处理程序
  $('.delete-row').click(function() {
    // 获取要删除的行
    var row = $(this).closest('tr');
    // 从表格中移除行
    row.remove();
  });
});

Dalam kod di atas, kami mula-mula menggunakan fungsi $() untuk mencari semua butang bernama "delete-row" selepas dokumen dimuatkan dan menambah pengendali acara A klik . Apabila pengguna mengklik pada butang padam, acara klik akan menyala dan fungsi panggil balik akan dilaksanakan.

Dalam fungsi panggil balik, kami menggunakan kaedah closest() untuk mencari baris di mana butang semasa berada dan menyimpan baris itu dalam pembolehubah row. Kami kemudian menggunakan kaedah remove() untuk mengalih keluar baris daripada jadual.

Adalah penting untuk ambil perhatian bahawa walaupun kami menggunakan kaedah closest(), ia hanya akan mencari elemen padanan terdekat, jadi jika butang padam tidak terkandung secara langsung dalam baris, tetapi dalam sel atau elemen lain , anda perlu mengubah suai pemilih untuk memadankan elemen yang betul.

Ini ialah cara memadamkan baris data dalam jadual secara dinamik menggunakan jQuery. Jika anda sedang membangunkan aplikasi web, menggunakan pendekatan ini boleh memudahkan pengguna mengedit dan mengurus data.

Atas ialah kandungan terperinci jadual jquery memadamkan baris data secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!