Rumah > Artikel > hujung hadapan web > Gunakan jQuery untuk mengalih keluar sel tertentu daripada jadual
jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk membangunkan aplikasi web interaktif. Dalam pembangunan web, jadual sering terlibat Satu keperluan biasa adalah untuk memadam sel tertentu dalam jadual. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk memadam sel tertentu dalam jadual dan memberikan contoh kod khusus.
Pertama, mari kita pertimbangkan struktur jadual ringkas seperti yang ditunjukkan di bawah:
<table id="myTable"> <tr> <td>1</td> <td>Apple</td> <td><button class="deleteCell">Delete</button></td> </tr> <tr> <td>2</td> <td>Orange</td> <td><button class="deleteCell">Delete</button></td> </tr> </table>
Dalam jadual ini, setiap baris mengandungi tiga sel: satu mengandungi nombor siri, satu mengandungi nama buah dan satu mengandungi butang "Padam". Matlamat kami adalah untuk memadam sel pertama (sel nombor siri) dalam baris yang sepadan apabila butang "Padam" diklik.
Sekarang, mari tulis kod jQuery untuk melaksanakan fungsi ini. Kodnya adalah seperti berikut:
$(document).ready(function() { $('.deleteCell').click(function() { $(this).closest('tr').find('td:first').remove(); }); });
Mari terangkan langkah demi langkah cara kod di atas berfungsi. Pertama, kaedah $(document).ready(function() { ... })
确保页面加载完毕后执行代码。接着,$('.deleteCell').click(function() { ... })
用于捕获“Delete”按钮的点击事件。在点击事件处理程序中,$(this)
表示当前点击的按钮。closest('tr')
用于找到最近的父级<tr>元素,即按钮所在的整行。<code>find('td:first')
用于找到这一行中的第一个<td>元素,即需要删除的单元格。最后,<code>remove()
digunakan untuk memadam sel yang ditemui.
Melalui kod di atas, kami telah melaksanakan fungsi memadam sel pertama dalam baris yang sepadan apabila mengklik butang "Padam". Dengan cara ini, kami berjaya menggunakan jQuery untuk mengendalikan jadual dan menyedari keperluan untuk memadamkan sel yang ditentukan dalam jadual.
Secara umum, melalui pengenalan dan contoh kod artikel ini, pembaca boleh mempelajari cara menggunakan jQuery untuk mengendalikan jadual dan merealisasikan fungsi memadam sel yang ditentukan. Saya harap artikel ini akan membantu amalan anda dalam pembangunan web.
Atas ialah kandungan terperinci Gunakan jQuery untuk mengalih keluar sel tertentu daripada jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!