แทรกแถวลงในตาราง

การแทรกแถวใหม่ลงในตาราง ไม่สามารถแทรกโดยใช้ innerHTML แทรกเข้าไปเหมือนพวก div ได้ครับ จำเป็นต้องใช้ Javascript สร้าง element ขึ้นมาใหม่ โดยฟังก์ชั่น createElement แล้วค่อยแทรกลงในตารางอีกที

<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 เท่านั้น
ตัวอย่าง