วัตถุ HTML DOM Column

วัตถุ HTML DOM Column เกี่ยวข้องกับองค์ประกอบ HTML <col> วัตถุ Column ใช้สำหรับดูหรือตั้งค่าคุณสมบัติขององค์ประกอบ <col> แท็ก <col> ใช้ได้เฉพาะภายในองค์ประกอบ <table> เท่านั้น

คุณสมบัติ

คุณสมบัติสำหรับวัตถุ column -

ไวยากรณ์

ไวยากรณ์สำหรับ -

การสร้างวัตถุ Column -

var a = document.createElement("COL");

ตัวอย่าง

ลองดูตัวอย่างสำหรับวัตถุ column -

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } </style> </head> <body> <h3>COL OBJECT</h3> <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table> <p>คลิกปุ่มด้านล่างเพื่อดึง span ขององค์ประกอบ col "COL1"</p> <button onclick="colObj()">COLUMN</button> <p id="Sample"></p> <script> function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= " + x; } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิกปุ่ม COLUMN -

ในตัวอย่างข้างต้น เราสร้างตารางที่มี 2 แถวและ 3 คอลัมน์ ตารางโดยรวมมีสไตล์ที่ใช้กับมัน ภายในตาราง เรามีองค์ประกอบ <col> สองตัว โดยตัวแรกมี span เท่ากับ 2 และอีกตัวมี inline style เนื่องจากสำหรับ <col> แรก span เท่ากับ 2 สไตล์ของมันจะใช้กับคอลัมน์สองคอลัมน์พอดี และ <col> ที่สองจะใช้สไตล์กับคอลัมน์ที่เหลือ -

table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table>

เราสร้างปุ่ม COLUMN ที่จะเรียกใช้เมธอด colObj() เมื่อผู้ใช้คลิก -

<button onclick="colObj()">COLUMN</button>

เมธอด colObj() ดึงองค์ประกอบ <col> แรกโดยใช้เมธอด getElementById() บนอ็อบเจกต์เอกสาร มันจึงดึงค่าแอตทริบิวต์ span ขององค์ประกอบ <col> และกำหนดให้ตัวแปร x ค่าแอตทริบิวต์ span ที่เก็บอยู่ในตัวแปร x จึงถูกแสดงในย่อหน้าที่มี id "Sample" โดยใช้คุณสมบัติ innerHTML ของย่อหน้า -

function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= " + x; }