Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > jadual jquery memadamkan baris data secara dinamik

jadual jquery memadamkan baris data secara dinamik

王林
Lepaskan: 2023-05-23 11:53:37
asal
764 orang telah melayarinya

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>
Salin selepas log masuk

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();
  });
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan