hujung hadapan web
html tutorial
Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?
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
Tatabahasa
$(selector).append(content)
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)
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()
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
Kami kemudiannya akan mengisi baris baharu dengan elemen
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 id="How-to-Add-Edit-and-Delete-Table-Row-in-jQuery">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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Apakah kekunci padam pada papan kekunci?
Mar 16, 2023 pm 04:48 PM
Terdapat dua kekunci padam papan kekunci: kekunci del (padam) dan kekunci ruang belakang. Ruang belakang juga dipanggil kekunci ruang belakang Kekunci ini boleh memadam kandungan teks di hadapan kursor dan kekunci padam boleh memadam aksara, fail dan objek yang dipilih. Setiap kali anda menekan kekunci del, aksara di sebelah kanan kursor akan dipadamkan, dan aksara di sebelah kanan kursor akan mengalihkan satu bingkai ke kiri apabila satu atau lebih fail/folder dipilih, tekan butang Del kekunci untuk memadam dengan cepat dalam sesetengah aplikasi Pilih objek dalam program dan tekan kekunci Del untuk memadam objek yang dipilih dengan cepat.
Apakah fungsi kunci padam
Mar 10, 2023 pm 06:07 PM
Fungsi kekunci padam ialah: 1. Padam aksara; setiap kali kekunci padam ditekan, aksara di sebelah kanan kursor akan dipadam, dan aksara di sebelah kanan kursor akan menggerakkan satu bingkai ke kiri. 2. Padam fail apabila satu atau lebih fail/folder dipilih, tekan kekunci Padam untuk memadamnya dengan cepat (bergerak ke Tong Kitar Semula untuk pemulihan). 3. Padam objek yang dipilih, pilih objek dalam beberapa aplikasi dan tekan kekunci Padam untuk memadam objek yang dipilih dengan cepat.
Cara Kawalan + Alt + Padam: Tutorial Mac
Apr 16, 2023 pm 12:37 PM
Control+Alt+Delete: Mod "Mac" Ctrlaltdel ialah gabungan kekunci biasa yang digunakan oleh pengguna Windows untuk membuka Pengurus Tugas. Mereka biasanya keluar dari aplikasi yang tidak diingini daripada menu pengurus untuk mengosongkan sedikit ruang pada komputer mereka. Varian Control+Alt+Delete Mac membolehkan anda membuka menu Force Quit. Jika pengguna Mac ingin keluar dari program yang menyebabkan masalah atau melihat program terbuka, mereka boleh berinteraksi dengan menu untuk menyiasat lebih lanjut. Bagaimana untuk melaksanakan ControlAltDelete pada Mac? Jika anda mempunyai sebarang aplikasi yang tidak berfungsi, anda mesti menggunakan kombinasi kekunci ini untuk
Apakah perbezaan antara insert ignore, insert dan replace dalam mysql
May 29, 2023 pm 04:40 PM
Perbezaan antara arahan insertignore, masukkan dan ganti sudah wujud atau tidak Contoh ralat sisipan (nama,umur)nilai("Xiaoming",23);insertignore mengabaikan nilai insertignoreintonames("Xiaoming",24) ;ganti Ganti dan masukkan nilai gantiintonames(nama,umur)("Xiao Ming", 25); Keperluan jadual: PrimaryKey, atau hasil indeks unik: id jadual akan ditambah secara automatik
Bolehkah fail yang dipadam dipulihkan?
Feb 24, 2023 pm 03:49 PM
Fail yang dipadam melalui pemadaman boleh dipulihkan kerana apabila pengguna menggunakan padam untuk memadam fail, fail ini akan dialihkan ke tong kitar semula dan tidak dipadam sepenuhnya. Kaedah pemulihan: 1. Buka "Tong Kitar Semula", pilih fail yang ingin anda pulihkan, dan klik "Pulihkan item ini" 2. Buka "Tong Kitar Semula", pilih fail yang ingin anda pulihkan, dan gunakan pintasan buat asal "ctrl+z".
Gunakan fungsi StringBuilder.insert() java untuk memasukkan rentetan pada kedudukan yang ditentukan
Jul 24, 2023 pm 09:37 PM
Gunakan fungsi StringBuilder.insert() java untuk memasukkan rentetan pada kedudukan tertentu StringBuilder ialah kelas dalam Java yang digunakan untuk mengendalikan rentetan pembolehubah. Fungsi insert() digunakan untuk Salah satu kaedah biasa memasukkan rentetan secara kedudukan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan fungsi insert() untuk memasukkan rentetan pada kedudukan tertentu dan memberikan contoh kod yang sepadan. masukkan()
Bagaimana untuk menambah, mengedit dan memadam baris jadual dalam jQuery?
Sep 05, 2023 pm 09:49 PM
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. Cara yang berkesan untuk mencapai ini adalah dengan memanfaatkan kuasa jQuery. jQuery menyediakan banyak ciri untuk membantu pembangun melaksanakan operasi. Baris jadual Baris jadual ialah koleksi data yang saling berkaitan, diwakili oleh elemen dalam HTML. Ia digunakan untuk mengumpulkan sel (diwakili oleh unsur) dalam jadual. Setiap elemen digunakan untuk menentukan baris dalam jadual, dan untuk jadual berbilang atribut, ia biasanya mengandungi satu atau lebih elemen. Syntax$(selector).append(co
Cara menggunakan permintaan PUT dan Padam dalam SpringBoot
May 13, 2023 pm 12:16 PM
Permintaan PUT dan Delete digunakan dalam borang Borang dan hanya menyokong kaedah get dan post Untuk melaksanakan kaedah put, kami boleh melaksanakan tiga langkah berikut: 1) Konfigurasikan HiddenHttpMethodFilter dalam SpringMVC 2) Buat borang siaran pada halaman 3) Buat item input, nama ="_method", nilainya ialah kaedah permintaan yang ditentukan Dapatkan nilai "_method" dalam kelas HiddenHttpMethodFilter untuk mendapatkan kaedah permintaan baharu. Tag ke-th ialah templat thymeleaf, yang bermaksud bahawa hanya apabila pekerja
