A-AA+then

สอบถามเรื่องการกำหนด สไตล์ ให้กับตารางที่สร้างจาก javascript

2,545
ผมคัดลอกโค๊ดการสร้างตารางจาก Howto ตามโค๊ดข้างล่าง
<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>
 
ผมต้องการกำหนด style ให้กับ column ตรงส่วน highlight
แต่ผมไม่รู้ว่าจะกำหนดได้อย่างไร ผมจึงอ้างอิงแบบตรงๆไปเลยเหมือนการสร้างตารางปกติ ตามแบบข้างล่าง ซึ่งมันใช้ไม่ได้

  // สร้าง td
  var cell = document.createElement( "td" );
  cell.setAttribute("style", "font-size:11px; color:blue");
  var cellText = document.createTextNode( "แถว " + j + ", คอลัมน์ " + i );
  cell.appendChild( cellText );
  row.appendChild( cell );
  };

รบกวนผู้รู้ด้วยครับ

2 ความคิดเห็น

ผมก็ไม่เคยลองใช้วิธีนี้เหมือนกัน เคยแต่ใช้การกำหนดเป็น property ของแต่ละตัวไป

cell.style.fontSize = '11px';
cell.style.color = 'blue';


ข้อสังเกต่ง่ายๆของการกำหนด style แบบนี้ว่าต้องใช้คำสั่งอะไร ก็คือ คำแรก ขึ้นต้นด้วยตัวเล็ก ส่วนคำที่ 2 ขึ้นต้นด้วย ตัวใหญ่ครับ แต่ต้องระวังนีิดนึงว่า ค่า property แบบนี้ แสดงผลไใาเหมือนกันในแต่ละ Browser ครับ (บางตัว)
1

 
2
^