Seperti yang ditunjukkan di bawah ini:
Copy kode kodenya sebagai berikut:
//Tambahkan baris secara dinamis
fungsi addRow(){
var tabel = document.getElementById("tableID");
var newRow = table.insertRow(); //Buat baris baru
var newCell1 = newRow.insertCell(); //Buat sel baru
newCell.innerHTML = ""; //Konten di dalam sel
newCell.setAttribute("align","center"); //Atur posisinya
}
//Menghapus baris secara dinamis
fungsi deleteRow(){
var rowIndex = acara.srcElement.parentElement.parentElement.rowIndex;
var gaya = dokumen.getElementById("tableID");
gaya.deleteRow(rowIndex);
}
<html>
<kepala>
<judul></judul>
</kepala>
<tubuh>
<tabel id="testTbl" perbatasan=1>
<tr>
<td>
Nama Produk
</td>
<td>
Kuantitas produk
</td>
<td>
Harga satuan produk
</td>
</tr>
<tr>
<td>
<pilih nama="a">
<option value="Elektronik">Elektronik</option>
<option value="Peralatan listrik">Peralatan listrik</option>
</pilih></td>
<td>
<masukan tipe = "teks" nama = "b">
</td>
<td>
<masukan tipe="teks" nama="c">
</td>
</td>
</tabel>
<input type="button" name="Kirim2" value="Tambahkan" onclick="addRow()">
<skrip>
fungsi addRow(){
//tambahkan baris
var newTr = testTbl.insertRow();
//tambahkan kolom
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//Mengatur konten dan atribut kolom
newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = dokumen.semua("b").nilai;
newTd2.innerText = dokumen.semua("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="Hapus" onclick="del(this)">';
}
fungsidel(o)
{
var t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</skrip>
</tubuh>
</html>