Rumah > hujung hadapan web > tutorial js > Bagaimana untuk menambah baris tr dalam jquery

Bagaimana untuk menambah baris tr dalam jquery

WBOY
Lepaskan: 2021-11-17 19:14:53
asal
3164 orang telah melayarinya

Dalam jquery, anda boleh menggunakan kaedah append() untuk menambah baris tr .tambah(

... )".

Bagaimana untuk menambah baris tr dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.0, komputer Dell G3.

Cara menambah baris dalam jquery

1. Buat fail html baharu, bernama test.html, untuk terangkan jquery Tambah baris tr secara dinamik pada jadual yang ditentukan. Dalam fail test.html, gunakan teg jadual, teg tr dan teg td untuk membuat jadual dengan dua baris dan dua lajur Seterusnya, kami akan menambahkan baris pada jadual secara dinamik.

Dalam fail test.html, tetapkan id teg jadual kepada testtd, yang digunakan terutamanya untuk mendapatkan objek jadual melalui id ini di bawah. Dalam fail test.html, gunakan teg butang untuk mencipta butang dengan nama "Tambah baris tr". Dalam fail test.html, ikat peristiwa klik onclick pada butang butang Apabila butang diklik, fungsi addonetr() dilaksanakan.

Bagaimana untuk menambah baris tr dalam jquery

2. Dalam teg js, cipta fungsi addonetr() dan dalam fungsi tersebut, tentukan html pembolehubah untuk menyimpan baris jadual yang perlu ditambah. Dapatkan objek jadual melalui id (testtb), dan gunakan kaedah append() untuk menambah baris pada jadual.

Bagaimana untuk menambah baris tr dalam jquery

Buka fail test.html dalam penyemak imbas, klik butang untuk melihat kesannya.

Bagaimana untuk menambah baris tr dalam jquery

Selepas mengklik butang:

Bagaimana untuk menambah baris tr dalam jquery

Kaedah append() menambah elemen baharu pada penghujung yang ditentukan elemen objek.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menambah baris tr dalam jquery. 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