Saya tidak mengatakan banyak omong kosong, saya akan memposting kode secara langsung.
<html> <head> <title> tabel </iteme> </head> <body> <Table Border = 1> <Thead> <td> Nama Depan </td> Nama Belakang </td> <td> <// td> </tr> <head> <tbody id = tb> <l id = 1st> </td> <td> tiga </td> <td> <input type = nilai tombol = Tambahkan onclick = add ()> <input type = value tombol = del onClick = del (this)> </td> </tbody> </body> </html> </html> </html> Script> Function Add () {var trobj = dokumen .creeelement (tr); > </td> <td> <input type = 'tombol' value = 'add' ontClick = 'add ()'> <input type = 'Tombol' value = 'del' ontClick = 'del (this)'> < /TD>; Removechild (trobj);} </script>Dalam kode di atas, tabel pertama kali dibangun di dalam tubuh.
Ada tiga kolom dalam contoh, kolom pertama dengan nama depan, kolom kedua nama belakang, dan kolom ketiga sebagai kolom operasi.
Kolom Operasi berisi dua operasi, satu adalah untuk menambahkan garis ke formulir, dan yang lainnya adalah menghapus baris saat ini. Operasi garis penambahan dan penghapusan diikat ke dua tombol, dan ketika tombol diklik, operasi ROW Tambah/ Hapus yang sesuai dipicu.
Metode penambahan Function add () {var trobj = document.createelement (tr); <input name = 'lastname'/> </td> <td> <input type = 'tombol' value = 'add' onClick = 'add ()'> <input type = 'value =' del 'ontClick =' del (ini) '> </td>;Baris pertama adalah membuat elemen TR, yaitu untuk membuat baris tabel.
Di baris kedua, trObj.id = new Date().getTime();
Baris ketiga, trObj.innerHTML = <td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>
<input type='button' value='Del' onclick='del(this)'></td> ; Melalui atribut InnerHtMML.
Baris keempat, document.getElementById(tb).appendChild(trObj); tambahkan baris formulir yang dibuat ke subjek tabel.
Fungsi del (obj) {var trum = obj.parentnode.parentnode.id;Parameter disampaikan dalam metode penghapusan. dimana ini berada.
Di baris pertama, var trId = obj.parentNode.parentNode.id ; Dapatkan ID dari simpul induk dari simpul induk dari elemen saat ini, yaitu, ID baris untuk menghapus.
Di baris kedua, var trObj = document.getElementById(trId);
Di baris ketiga, document.getElementById(tb).removeChild(trObj);
Kode di atas pada dasarnya mewujudkan fungsi peningkatan pengukur meter dan penghapusan, tetapi ada kekurangan dalam kode.
1 Tabel 1 sebelum dan sesudah peningkatan, lebar tabel berubah
Meningkatkan
Meningkatkan
Setelah peningkatan, bentuk bentuk menjadi lebih luas
2 Halaman default browser dalam bahasa Cina muncul kacau dalam bahasa Cina
Anda perlu mengatur pengkodean karakter untuk memodifikasi format pengkodean halaman sebelum dapat ditampilkan secara normal