ตัวอย่างนี้อธิบายวิธีการใช้งาน TR และ TD ของการเพิ่มตารางแบบไดนามิกโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> </title>
<ภาษาสคริปต์ = "JavaScript">
var temprow = 0;
var maxrows = 0;
ฟังก์ชัน inserTrows () {
temprow = table1.rows.length-1;
maxrows = temprow;
temprow = temprow+1;
var rows = table1.rows; // แถวเหมือนอาร์เรย์
var newRow = table1.insertrow (table1.rows.length); // แทรกแถวใหม่
เซลล์ var = newrow.cells; // เซลล์เหมือนอาเรย์
สำหรับ (i = 0; i <2; i ++) // 7 คอลัมน์ข้อมูลต่อแถว
-
var newCell = rows (newrow.rowindex) .insertCell (cells.length);
newcell.align = "center";
สลับ (i)
-
กรณีที่ 0: newCell.innerHtml = "<td valign = 'top'> corpname </td>"; หยุดพัก;
กรณีที่ 1: newcell.innerhtml = "<td valign = 'top'> <a href = 'javaScript: delTablerow (/" "+temprow+"/")'> ลบ </a> </td>"; หยุดพัก;
-
-
maxrows+= 1;
-
ฟังก์ชั่น deltablerow (rownum) {
if (table1.rows.length> rownum) {
ตารางที่ 1.Deleterow (Rownum);
-
-
</script>
</head>
<body>
<form action = "">
<table cellpacing = "0" cellpadding = "0" align = "center">
<tr valign = "top">
<th>
<ค่าอินพุต = "เพิ่ม" type = "ปุ่ม" onclick = "inserTrows ()">>
</th>
</tr>
</table>
<br />
<table allign = "center" id = "table1">
<tr>
<th> ชื่อ บริษัท </th>
<th> การดำเนินการ <th>
</tr>
</table>
</form>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน