สอบถามเรื่องการกำหนด สไตล์ ให้กับตารางที่สร้างจาก javascript
ผมคัดลอกโค๊ดการสร้างตารางจาก 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 );
};
รบกวนผู้รู้ด้วยครับ
<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 );
};
รบกวนผู้รู้ด้วยครับ
cell.style.fontSize = '11px';
cell.style.color = 'blue';
ข้อสังเกต่ง่ายๆของการกำหนด style แบบนี้ว่าต้องใช้คำสั่งอะไร ก็คือ คำแรก ขึ้นต้นด้วยตัวเล็ก ส่วนคำที่ 2 ขึ้นต้นด้วย ตัวใหญ่ครับ แต่ต้องระวังนีิดนึงว่า ค่า property แบบนี้ แสดงผลไใาเหมือนกันในแต่ละ Browser ครับ (บางตัว)