metode insertRow()
Definisi dan penggunaan
Metode insertRow() digunakan untuk menyisipkan baris baru pada posisi tertentu dalam tabel.
tata bahasa
tableObject.insertRow(indeks)
nilai kembalian
Mengembalikan TableRow yang mewakili baris yang baru disisipkan.
menjelaskan
Metode ini membuat objek TableRow baru yang mewakili tag <tr> baru dan menyisipkannya ke dalam tabel pada posisi yang ditentukan.
Baris baru akan disisipkan sebelum baris di indeks. Jika indeks sama dengan jumlah baris dalam tabel, maka baris baru akan ditambahkan ke akhir tabel.
Jika tabel kosong, baris baru akan disisipkan ke bagian <tbody> baru, yang akan disisipkan sendiri ke dalam tabel.
Melemparkan
Jika indeks parameter kurang dari 0 atau lebih besar atau sama dengan jumlah baris dalam tabel, metode ini akan memunculkan pengecualian DOMException dengan kode INDEX_SIZE_ERR.
contoh
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<skrip tipe="teks/javascript">
fungsi di baris()
{
dokumen.getElementById('MyTable').insertRow(0)
}
</skrip>
</kepala>
<tubuh>
<table id="myTable">
<tr>
<td>Baris1 sel1</td>
<td>Baris 1 sel2</td>
</tr>
<tr>
<td>Baris2 sel1</td>
<td>Baris2 sel2</td>
</tr>
</tabel>
<br />
<masukan tipe="tombol" onclick="insRow()"
value="Masukkan baris baru">
</tubuh>
</html>
hapusSel()
Definisi dan penggunaan
Metode deleteCell() digunakan untuk menghapus sel (elemen <td>) di baris tabel.
tata bahasa
tablerowObject.deleteCell(indeks)
menjelaskan
Indeks parameter adalah posisi pada baris elemen tabel yang akan dihapus.
Cara ini akan menghapus elemen tabel pada posisi yang ditentukan dalam baris tabel.
Melemparkan
Jika indeks parameter kurang dari 0 atau lebih besar atau sama dengan jumlah elemen tabel dalam baris, metode ini akan memunculkan pengecualian DOMException dengan kode INDEX_SIZE_ERR.
contoh
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<skrip tipe="teks/javascript">
fungsidelRow()
{
dokumen.getElementById('MyTable').deleteRow(0)
}
</skrip>
</kepala>
<tubuh>
<table id="myTable">
<tr>
<td>Baris1 sel1</td>
<td>Baris 1 sel2</td>
</tr>
<tr>
<td>Baris2 sel1</td>
<td>Baris2 sel2</td>
</tr>
</tabel>
<br />
<masukan tipe="tombol" onclick="delRow()"
value="Hapus baris pertama">
</tubuh>
</html>
masukkanSel()
Definisi dan penggunaan
Metode insertCell() digunakan untuk menyisipkan elemen <td> kosong pada posisi tertentu dalam baris tabel HTML.
tata bahasa
tablerowObject.insertCell(indeks)
nilai kembalian
Objek TableCell yang mewakili elemen <td> yang baru dibuat dan disisipkan.
menjelaskan
Metode ini membuat elemen <td> baru dan menyisipkannya ke dalam baris pada posisi yang ditentukan. Sel baru akan disisipkan sebelum sel saat ini berada pada posisi yang ditentukan oleh indeks. Jika indeks sama dengan jumlah sel dalam baris, sel baru akan ditambahkan ke akhir baris.
Perlu diketahui bahwa metode ini hanya dapat menyisipkan elemen tabel data <td>. Jika Anda perlu menambahkan elemen header ke baris, Anda harus membuat dan menyisipkan elemen <th> menggunakan metode Document.createElement() dan metode Node.insertBefore() (atau metode terkait).
Melemparkan
Jika indeks parameter kurang dari 0 atau lebih besar atau sama dengan jumlah elemen tabel dalam baris, metode ini akan memunculkan pengecualian DOMException dengan kode INDEX_SIZE_ERR.
contoh
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<skrip tipe="teks/javascript">
fungsi insCell()
{
var x=dokumen.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</skrip>
</kepala>
<tubuh>
<tabel>
<tr id="tr1">
<th>Nama depan</th>
<th>Nama belakang</th>
</tr>
<tr id="tr2">
<td>Petrus</td>
<td>Griffin</td>
</tr>
</tabel>
<br />
<input type="button" onclick="insCell()" value="Masukkan sel">
</tubuh>
</html>
hapusSel()
Definisi dan penggunaan
Metode deleteCell() digunakan untuk menghapus sel (elemen <td>) di baris tabel.
tata bahasa
tablerowObject.deleteCell(indeks)
menjelaskan
Indeks parameter adalah posisi pada baris elemen tabel yang akan dihapus.
Cara ini akan menghapus elemen tabel pada posisi yang ditentukan dalam baris tabel.
Melemparkan
Jika indeks parameter kurang dari 0 atau lebih besar atau sama dengan jumlah elemen tabel dalam baris, metode ini akan memunculkan pengecualian DOMException dengan kode INDEX_SIZE_ERR.
contoh
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<skrip tipe="teks/javascript">
fungsidelCell()
{
dokumen.getElementById('tr2').deleteCell(0)
}
</skrip>
</kepala>
<tubuh>
<tabel>
<tr id="tr1">
<th>Nama depan</th>
<th>Nama belakang</th>
</tr>
<tr id="tr2">
<td>Petrus</td>
<td>Griffin</td>
</tr>
</tabel>
<br />
<input type="button" onclick="delCell()" value="Hapus sel">
</tubuh>
</html>
Aplikasi dalam proyek:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
vartrIndeks = 0;
//Menambahkan baris secara dinamis
pengurapan appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var namakelas;
jika(batal!=sel){
for(var i = 0; i < sel.options.length; i++){
if(sel.options[i].selected)
className=sel.options[i].value;
}
}
//Data berasal dari ajax, format json.
convert.getConvertBean2Json(namakelas,
fungsi(hasil) {
var obj = eval('('+hasil+')');
var tabel = document.getElementById("convertTable");
var newRow = tabel.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' nilai='"+obj.nama+"'>";
if(null!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"Nama parameter:"+obj.paramList[i].name+
";Jenis parameter:"+obj.paramList[i].type+
"; Nilai parameter: <nama masukan='convertList["+trIndex+"].paramList["+i+"].value' type='teks'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndeks++;
});
}
//hapus baris
di deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndeks--;
}
</skrip>