Contoh demonstrasi: Gunakan jQuery untuk memadam elemen td dalam jadual-tutorial js-php.cn

Contoh demonstrasi: Gunakan jQuery untuk memadam elemen td dalam jadual

PHPz

Lepaskan： 2024-02-23 11:45:04

asal

1148 orang telah melayarinya

Contoh demonstrasi: Gunakan jQuery untuk memadam elemen td dalam jadual

Ringkasan: Artikel ini akan memperkenalkan cara menggunakan jQuery untuk memadamkan elemen td dalam jadual, dan menunjukkan proses melalui contoh kod tertentu.

Dalam pembangunan web, kami sering menghadapi situasi di mana elemen dalam jadual perlu dimanipulasi secara dinamik. Anda boleh menggunakan jQuery untuk memadamkan elemen td dalam jadual dengan mudah. Berikut akan menggunakan contoh kod khusus untuk menunjukkan cara memadam elemen td dalam jadual melalui jQuery.

Pertama, kita memerlukan struktur jadual HTML yang ringkas sebagai contoh. Katakan kita mempunyai jadual dengan 3 baris dan 4 lajur, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除表格中的td元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
    <td>行1列3</td>
    <td>行1列4</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
    <td>行2列3</td>
    <td>行2列4</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
    <td>行3列3</td>
    <td>行3列4</td>
  </tr>
</table>
<button id="deleteBtn">删除单元格</button>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta jadual dengan 3 baris dan 4 lajur, dan menambah butang untuk mencetuskan operasi pemadaman.

Seterusnya, kami akan menggunakan jQuery untuk melaksanakan fungsi memadam elemen td dalam jadual. Berikut ialah contoh kod jQuery yang lengkap:

$(document).ready(function(){
  $('#deleteBtn').click(function(){
    // 删除第二行第三列的单元格
    $('#myTable tr:eq(1) td:eq(2)').remove();
  });
});

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan $(document).ready() untuk memastikan dokumen dimuatkan sebelum melaksanakan kod. Kemudian dengar acara klik butang melalui $('#deleteBtn').click(). Apabila butang diklik, fungsi panggil balik akan dilaksanakan. Dalam fungsi panggil balik, kami menggunakan $('#myTable tr:eq(1) td:eq(2)').remove() untuk memilih sel dalam baris kedua dan lajur ketiga, dan Padamkannya. $(document).ready()来确保文档加载完成后再执行代码。然后通过$('#deleteBtn').click()来监听按钮的点击事件。当按钮被点击时，会执行其中的回调函数。在回调函数中，我们使用$('#myTable tr:eq(1) td:eq(2)').remove()来选中第二行第三列的单元格，并将其删除。

最后，我们只需要在页面中引入jQuery库，并将上述jQuery代码放置在<script></script>

Akhir sekali, kami hanya perlu memperkenalkan perpustakaan jQuery ke dalam halaman dan meletakkan kod jQuery di atas dalam tag <script></script> untuk mencapai fungsi memadam elemen td dalam jadual.

Melalui contoh demonstrasi di atas, pembaca boleh mempelajari cara menggunakan jQuery untuk memadamkan elemen td dalam jadual dan memahami proses pelaksanaan kod tertentu. Saya harap artikel ini akan membantu pembaca apabila berurusan dengan elemen jadual dalam pembangunan web. 🎜

Atas ialah kandungan terperinci Contoh demonstrasi: Gunakan jQuery untuk memadam elemen td dalam jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!