Padamkan sel yang ditentukan dalam jadual menggunakan jQuery

Tajuk: Gunakan jQuery untuk memadamkan elemen sel tertentu dalam jadual

Dalam pembangunan web, kita sering menghadapi situasi di mana kita perlu mengendalikan jadual, dan salah satunya ialah memadamkan elemen sel tertentu dalam jadual. Fungsi ini boleh dicapai dengan mudah menggunakan jQuery. Berikut akan menggunakan contoh kod khusus untuk menunjukkan cara menggunakan jQuery untuk memadam elemen sel tertentu dalam jadual.

Pertama, kita memerlukan struktur jadual HTML yang ringkas sebagai contoh:

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
</table>

Dalam contoh di atas, kita mempunyai jadual yang mengandungi butang nama, umur dan tindakan, dan sel terakhir setiap baris mengandungi butang "Padam" . Matlamat kami adalah untuk memadamkan data baris selepas mengklik butang "Padam".

Seterusnya, kami menggunakan jQuery untuk melaksanakan fungsi padam. Mula-mula memperkenalkan perpustakaan jQuery ke dalam halaman:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Kemudian tulis kod jQuery untuk melaksanakan fungsi padam:

<script>
$(document).ready(function(){
    $('.deleteBtn').click(function(){
        $(this).closest('tr').remove();
    });
});
</script>

Dalam kod di atas, kita mula-mula menggunakan elemen $(document).ready()来确保页面加载完成后再执行代码。然后，我们通过$('.deleteBtn').click()来监听所有“删除”按钮的点击事件。当点击按钮时，通过$(this).closest('tr').remove()找到最接近的<tr> (iaitu baris semasa), dan kemudian padam baris. <p>Kini, apabila butang "Padam" mana-mana baris diklik, data baris itu akan dialih keluar daripada jadual. </p> <p>Dengan contoh kod terperinci di atas, kami menunjukkan cara memadam elemen sel tertentu dalam jadual menggunakan jQuery. Kaedah ini mudah dan cekap, dan boleh membantu kami melaksanakan operasi jadual dengan lebih mudah dalam pembangunan web. </p> </tr>

Atas ialah kandungan terperinci Padamkan sel yang ditentukan dalam jadual menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!