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

การแทรกแถวใหม่ลงในตาราง ไม่สามารถแทรกโดยใช้ 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 เท่านั้น
ตัวอย่าง
^