Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?-html tutorial-php.cn

Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?

王林

Lepaskan： 2023-09-05 21:49:10

ke hadapan

925 orang telah melayarinya

Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?

Dalam era pembangunan web hari ini, pengurusan jadual yang berkesan dan cekap telah menjadi sangat penting, terutamanya apabila berurusan dengan aplikasi web berat data. Keupayaan untuk menambah, mengedit dan memadam baris secara dinamik daripada jadual boleh meningkatkan pengalaman pengguna dengan ketara dan menjadikan aplikasi lebih interaktif. Satu cara yang berkesan untuk mencapai ini ialah memanfaatkan kuasa jQuery. jQuery menyediakan banyak ciri untuk membantu pembangun melaksanakan operasi.

Barisan jadual

Baris jadual ialah koleksi data yang saling berkaitan, diwakili oleh elemen

dalam HTML. Ia digunakan untuk mengumpulkan sel (diwakili oleh elemen) bersama-sama dalam jadual. Setiap elemen digunakan untuk menentukan baris dalam jadual, dan untuk jadual berbilang atribut, ia biasanya mengandungi satu atau lebih elemen.

Tatabahasa

$(selector).append(content)

Salin selepas log masuk

Kaedah append() dalam jQuery digunakan untuk menambah kandungan pada penghujung elemen, sama ada ia elemen tunggal atau sekumpulan elemen. Kandungan boleh berupa teks, HTML atau elemen lain.

Kandungan boleh berupa rentetan HTML, elemen DOM atau objek jQuery.

$(selector).find(selectCondition)

Salin selepas log masuk

Fungsi find() dalam jQuery digunakan untuk mencari dan memilih elemen turunan bagi elemen yang dipilih. Ia mencari keseluruhan pepohon DOM untuk elemen yang dipilih dan mengembalikan semua elemen padanan dalam objek jQuery baharu.

Di mana selectCondition ialah rentetan yang mewakili elemen yang akan dipilih, seperti nama kelas atau teg.

$(selctor).remove()

Salin selepas log masuk

Kaedah remove() dalam jQuery digunakan untuk mengalih keluar elemen yang dipilih dan elemen anaknya daripada DOM (Document Object Model).

Kaedah

Untuk melaksanakan operasi pada baris jadual menggunakan jQuery, kami akan menggunakan gabungan kaedah jQuery dan teknik manipulasi DOM. Mari kita bincangkan ketiga-tiga operasi yang akan kita lihat dalam artikel ini iaitu menambah, mengedit dan memadam baris secara berasingan. Jadi, bercakap tentang operasi pertama iaitu menambah baris baharu pada jadual, kami akan menggunakan kaedah append() yang disebutkan di atas. Untuk melakukan ini, mula-mula kita akan membina elemen baharu dan kemudian memasukkannya ke dalam jadual menggunakan kaedah append().

Kami kemudiannya akan mengisi baris baharu dengan elemen baharu dan memberikannya nilai menggunakan kaedah text() atau html(). Sekarang untuk operasi kedua, iaitu mengubah suai baris jadual, kami mula-mula menggunakan kaedah find() untuk memilih elemen yang berkaitan dalam baris, dan kemudian gunakan kaedah text() atau html() untuk mengubah suai kandungannya. Akhir sekali, untuk melaksanakan operasi terakhir, iaitu memadam baris jadual, kami hanya menggunakan kaedah remove() pada baris yang ingin kami padamkan.

Tetapi sebelum kita mula menerangkan semua bahagian, mula-mula saya ingin menarik perhatian anda kepada fakta bahawa untuk memasukkan jQuery ke dalam halaman web saya, saya menggunakan CDN, yang boleh anda lihat dalam tag skrip.

Sekarang kembali kepada kod, mari kita bincangkan elemen badan dahulu. Badan mengandungi jadual maya dengan dua baris dan dua lajur. Selain itu, ia juga mengandungi tiga butang berlabel "Tambah Baris", "Padam Baris" dan "Edit Baris" yang akan kami gunakan kemudian dalam skrip untuk menambah fungsi yang diperlukan pada kod. Saya juga menggunakan CSS untuk menambah beberapa penggayaan untuk menambah baik penampilan baris jadual. Akhirnya dalam bahagian skrip, saya menulis logik untuk semua fungsi menggunakan jQuery. Saya menggunakan semua fungsi di atas untuk mencapai fungsi ini. Fungsi ini telah dilaksanakan menggunakan pengendali acara jQuery, yang dicetuskan apabila butang yang sepadan diklik.

Contoh

Berikut ialah kod lengkap yang akan kami gunakan dalam contoh ini -

<!DOCTYPE html>
<html>
<head>
   <title>How to Add Edit and Delete Table Row in jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      table{
         border: 2px solid black
      }
      td{
         padding: 2px
      }
   </style>
</head>
<body>
   <h4>How to Add Edit and Delete Table Row in jQuery? </h4>
   <table id="my-table">
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
   </table>
   <br>
   <button id="add-btn">Add Row</button>
   <button id="remove-btn">Remove Row</button>
   <button id="edit-btn">Edit Row</button>
   <script>
      $(document).ready(function(){
         $("#add-btn").click(function(){
            var newRow = "<tr><td>New Row</td><td>Data</td></tr>";
            $("#my-table").append(newRow);
         });
         $("#remove-btn").click(function(){
            $("#my-table tr:last").remove();
         });
         $("#edit-btn").click(function(){
            let rows=$("#my-table").find("tr")
            let idx=Math.floor(Math.random()*rows.length)
            rows.eq(idx).find("td").eq(0).text("Edited Row")
         });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami telah memperkenalkan banyak kaedah dalam jQuery iaitu ia adalah append(), find() dan remove(). Kami melihat cara menggunakan kaedah ini yang disediakan oleh jQuery bersama-sama dengan beberapa teknik manipulasi DOM untuk menambah, mengedit dan memadam baris jadual secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!