Rumah > hujung hadapan web > tutorial js > Gunakan jQuery untuk mengalih keluar sel tertentu daripada jadual

Gunakan jQuery untuk mengalih keluar sel tertentu daripada jadual

WBOY
Lepaskan: 2024-02-25 13:48:24
asal
823 orang telah melayarinya

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

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

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!

Label berkaitan:
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