สร้างตารางด้วย Javascript

เนื่องจาก เราไม่สามารถ สร้างตาราง แถว หรือ แม้แต่ column ด้วย text เหมือน div ได้ เช่น

div.innerHTML = '<table><tr><td>ข้อความ</td></tr></table>';

เราจึงต้องใช้ Javascript ช่วยสร้างขึ้นมาแทนครับ ด้วยฟังก์ชั่น createElement()

<script type = "text/javascript">
function start()
{
 //อ่าน body
 var body = document.getElementsByTagName( "body" )[0];
 // สร้าง <table> และ <tbody>
 var tbl = document.createElement( "table" );
 var tblBody = document.createElement( "tbody" );
 // 2 แถว 2 คอลัมน์
 for( var j = 0 ; j < 2 ; j++ )
 {
  // สร้าง row
  var row = document.createElement( "tr" );
  // สร้าง col
  for( var i = 0 ; i < 2 ; i++ )
  {
   // สร้าง td
   var cell = document.createElement( "td" );
   var cellText = document.createTextNode( "แถว " + j + ", คอลัมน์ " + i );
   cell.appendChild( cellText );
   row.appendChild( cell );
  };
  // แทรกแถว ลงใน tbody
  tblBody.appendChild( row );
 };
 // ใส่ <tbody> ลงใน <table>
 tbl.appendChild( tblBody );
 // ใส่ <table> ลงใน <body>
 body.appendChild( tbl );
 // กำหนด border
 tbl.setAttribute( "border" , "1" );
}
</script>

<body onload="start()">
</body>
ผู้เขียน goragod โพสต์เมื่อ 01 เม.ย. 2551 เปิดดู 29,699 ป้ายกำกับ HTMLJavascriptDOM
^