ดังที่แสดงด้านล่าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
//เพิ่มแถวแบบไดนามิก
ฟังก์ชัน addRow(){
ตาราง var = document.getElementById("tableID");
var newRow = table.insertRow(); //สร้างแถวใหม่
var newCell1 = newRow.insertCell(); //สร้างเซลล์ใหม่
newCell.innerHTML = ""; //เนื้อหาภายในเซลล์
newCell.setAttribute("align", "center"); // กำหนดตำแหน่ง
-
// ลบแถวแบบไดนามิก
ฟังก์ชั่น DeleteRow(){
var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
var styles = document.getElementById("tableID");
styles.deleteRow(rowIndex);
-
<html>
<หัว>
<title></title>
</หัว>
<ร่างกาย>
<table id="testTbl" border=1>
<tr>
<td>
ชื่อสินค้า
</td>
<td>
ปริมาณสินค้า
</td>
<td>
ราคาต่อหน่วยผลิตภัณฑ์
</td>
</tr>
<tr>
<td>
<เลือกชื่อ = "a">
<option value="อิเล็กทรอนิกส์">อิเล็กทรอนิกส์</option>
<option value="เครื่องใช้ไฟฟ้า">เครื่องใช้ไฟฟ้า</option>
</select></td>
<td>
<ประเภทอินพุต = "ข้อความ" ชื่อ = "b">
</td>
<td>
<ประเภทอินพุต = "ข้อความ" ชื่อ = "c">
</td>
</td>
</ตาราง>
<input type="button" name="Submit2" value="Add" onclick="addRow()">
<สคริปต์>
ฟังก์ชัน addRow(){
//เพิ่มแถว
var newTr = testTbl.insertRow();
//เพิ่มคอลัมน์
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//กำหนดเนื้อหาและคุณสมบัติของคอลัมน์
newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = document.all("b").value;
newTd2.innerText = document.all("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="Delete" onclick="del(this)">';
-
ฟังก์ชั่นเดล(o)
-
var t=document.getElementById('testTbl');
t.deleteRow (o.parentNode.parentNode.rowIndex)
-
</สคริปต์>
</ร่างกาย>
</html>