แทรกแถวลงในตาราง
การแทรกแถวใหม่ลงในตาราง ไม่สามารถแทรกโดยใช้ innerHTML แทรกเข้าไปเหมือนพวก div ได้ครับ จำเป็นต้องใช้ Javascript สร้าง element ขึ้นมาใหม่ โดยฟังก์ชั่น createElement แล้วค่อยแทรกลงในตารางอีกที
โค้ด HTML อยู่ด้านล่างครับ
ปัญหาของการสร้างดารางด้วยวิธีนี้คือ เราจะต้องมีโครงสร้างตารางที่ถูกต้องเท่านั้น (valid HTML) เนื่องจากการสร้างแถว เราต้องสร้างแถวภายใต้ thead tbody และ tfoot เท่านั้น
ตัวอย่าง
<script>
function createrow() {
//อ่านข้อความที่จะแสดงในแถวใหม่
var val = document.getElementById('tdname').value
//สร้างแถวใหม่
var row = document.createElement("tr")
//สร้าง col ใหม่
var cell = document.createElement("td");
//ใส่ข้อความลงใน col
var cellText = document.createTextNode(val);
cell.appendChild(cellText);
//แทรก col ลงใน row
row.appendChild(cell);
//แทรก row ลงใน table
var tblBody = document.getElementById("tblBody");
tblBody.appendChild(row);
}
</script>โค้ด HTML อยู่ด้านล่างครับ
<body>
<input type="text" name="tdname" id="tdname" /><input type="button" name="create" value="Create." onclick="createrow()" />
<table><tbody id="tblBody"></tbody></table>
</body>ปัญหาของการสร้างดารางด้วยวิธีนี้คือ เราจะต้องมีโครงสร้างตารางที่ถูกต้องเท่านั้น (valid HTML) เนื่องจากการสร้างแถว เราต้องสร้างแถวภายใต้ thead tbody และ tfoot เท่านั้น
ตัวอย่าง