Ada beberapa baris dalam tabel: var trcnt = tabel.rows.length; (Tabel ID)
Berapa banyak kolom yang ada untuk setiap baris: untuk (var i = 0; i <trcnt; i ++)
Table.rows [i] .cells.length;
Tabel Operasi JavaScript:
Metode InserTrow (), Deleterow (), InsertCell (), Deletecell ()
TABLE.InserTrow () baik-baik saja di bawah IE, tetapi di Firefox, itu harus diubah menjadi Table.IserTrow (-1)
Demikian pula, insertCell () yang sesuai juga harus diubah menjadi insertCell (-1)
Metode insertrow ()
Definisi dan penggunaan
Metode insertrow () digunakan untuk memasukkan baris baru pada posisi yang ditentukan dalam tabel.
tata bahasa
TableObject.IserTrow (indeks)
Nilai pengembalian
Mengembalikan tablerow, menunjukkan baris yang baru dimasukkan.
menjelaskan
Metode ini membuat objek TableRow baru, mewakili tag <tr> baru, dan memasukkannya ke posisi yang ditentukan dalam tabel.
Baris baru akan dimasukkan sebelum baris indeks. Jika indeks sama dengan jumlah baris dalam tabel, baris baru akan ditambahkan ke akhir tabel.
Jika tabel kosong, baris baru akan dimasukkan ke dalam segmen <tbody> baru, yang dengan sendirinya akan dimasukkan ke dalam tabel.
Membuang
Jika indeks parameter kurang dari 0 atau lebih dari atau sama dengan jumlah baris dalam tabel, metode ini akan melempar pengecualian DomException dengan kode index_size_err.
contoh
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi insrow ()
{
document.geteLementById ('mytable'). Inertrow (0)
}
</script>
</head>
<body>
<tabel id = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
</tr>
</boable>
<br />
<input type = "tombol" ontClick = "insrow ()"
value = "masukkan baris baru">
</body>
</html>
deletecell ()
Definisi dan penggunaan
Metode deletecell () digunakan untuk menghapus sel (<td> elemen) di baris tabel.
tata bahasa
tablerowobject.deleteCell (indeks)
menjelaskan
Indeks parameter adalah posisi elemen tabel yang akan dihapus di baris.
Metode ini menghapus elemen tabel pada posisi yang ditentukan di baris tabel.
Membuang
Jika indeks parameter kurang dari 0 atau lebih besar dari atau sama dengan elemen tabel di baris, metode ini akan melempar pengecualian DomException dengan kode index_size_err.
contoh
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi delrow ()
{
document.geteLementById ('mytable'). deleterow (0)
}
</script>
</head>
<body>
<tabel id = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
</tr>
</boable>
<br />
<input type = "tombol" ontClick = "delrow ()"
value = "hapus baris pertama">
</body>
</html>
insertCell ()
Definisi dan penggunaan
Metode insertCell () digunakan untuk memasukkan elemen <td> kosong pada posisi baris yang ditentukan dalam tabel HTML.
tata bahasa
tablerowobject.insertcell (indeks)
Nilai pengembalian
Objek TableCell yang mewakili elemen <TD> yang baru dibuat dan dimasukkan.
menjelaskan
Metode ini akan membuat elemen <td> baru dan memasukkannya ke posisi yang ditentukan di baris. Sel baru akan dimasukkan sebelum elemen tabel saat ini terletak di posisi yang ditentukan dalam indeks. Jika indeks sama dengan jumlah sel di baris, sel baru ditambahkan di akhir baris.
Perhatikan bahwa metode ini hanya dapat memasukkan elemen tabel data <td>. Jika Anda perlu menambahkan elemen header ke barisan, Anda harus membuat dan memasukkan elemen <t th> menggunakan metode document.createElement () dan metode node.insertBefore () (atau metode terkait).
Membuang
Jika indeks parameter kurang dari 0 atau lebih besar dari atau sama dengan elemen tabel di baris, metode ini akan melempar pengecualian DomException dengan kode index_size_err.
contoh
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi inscell ()
{
var x = document.geteLementById ('tr2'). InsertCell (0)
x.innerhtml = "John"
}
</script>
</head>
<body>
<able>
<tr id = "tr1">
<th> nama pertama </t>
<th> nama terakhir </t>
</tr>
<tr id = "tr2">
<td> Peter </td>
<td> griffin </td>
</tr>
</boable>
<br />
<input type = "tombol" ontClick = "inscell ()" value = "masukkan sel">
</body>
</html>
deletecell ()
Definisi dan penggunaan
Metode deletecell () digunakan untuk menghapus sel (<td> elemen) di baris tabel.
tata bahasa
tablerowobject.deleteCell (indeks)
menjelaskan
Indeks parameter adalah posisi elemen tabel yang akan dihapus di baris.
Metode ini menghapus elemen tabel pada posisi yang ditentukan di baris tabel.
Membuang
Jika indeks parameter kurang dari 0 atau lebih besar dari atau sama dengan elemen tabel di baris, metode ini akan melempar pengecualian DomException dengan kode index_size_err.
contoh
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi delcell ()
{
Document.getElementById ('TR2'). DELETECELL (0)
}
</script>
</head>
<body>
<able>
<tr id = "tr1">
<th> nama pertama </t>
<th> nama terakhir </t>
</tr>
<tr id = "tr2">
<td> Peter </td>
<td> griffin </td>
</tr>
</boable>
<br />
<input type = "tombol" ontClick = "delcell ()" value = "delete cell">
</body>
</html>
Aplikasi dalam proyek:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var trindex = 0;
// Tingkatkan baris secara dinamis
unction appendConvert () {
// var sel = document.geteLementById ("selectConVertName");
var sel = document.geteLementsByName ("selectConVertName") [0];
var className;
if (null! = sel) {
untuk (var i = 0; i <sel.options.length; i ++) {
if (sel.Options [i]. Dipilih)
className = sel.Options [i] .value;
}
}
// Data berasal dari formulir Ajax, JSON.
convert.getConVertBean2json (classname,
fungsi (hasil) {
var obj = eval ('('+hasil+')');
var table = document.geteLementById ("convertTable");
var newrow = Table.InserTrow (trindex+1);
newrow.insertcell (0) .innerHtml = obj.name+"<input type = 'tombol' value = 'delete' onClick = 'deleterow (this)'>";
newrow.insertcell (1) .innerHtml = "<input type = 'text' name = 'convertList ["+trindex+"]. id'> <input type = 'hidden' name = 'convertList ["+trindex+"]. name' value = '"+obj.name+">";
if (null! = obj.paramlist) {
var paramstr = "";
untuk (var i = 0; i <obj.paramlist.length; i ++) {
paramstr = paramstr+
"Nama Parameter:"+obj.paramlist [i] .name+
"; Tipe parameter:"+obj.paramlist [i] .type+
"; Nilai parameter: <input name = 'convertList ["+trindex+"]. Paramlist ["+i+"]. Value' type = 'text'> <br>"+
"<input type = 'tersembunyi' name = 'convertList ["+trindex+"]. Paramlist ["+i+"]. name' value = '"+obj.paramlist [i] .name+"'>"+
"<input type = 'tersembunyi' name = 'convertList ["+trindex+"]. Paramlist ["+i+"]. Type' value = '"+obj.paramlist [i] .type+"'>";
}
newrow.insertcell (2) .innerHtml = paramstr;
}
Trindex ++;
});
}
// Hapus garis
di deleterow (r) {
var i = r.parentnode.parentnode.rowIndex;
document.geteLementById ('convertTable'). deleterow (i);
Trindex--;
}
</script>