วัตถุ HTML DOM ColumnGroup

วัตถุ HTML DOM ColumnGroup เกี่ยวข้องกับองค์ประกอบ HTML <colgroup> องค์ประกอบ <colgroup> ใช้สำหรับใช้สไตล์ CSS กับจำนวนคอลัมน์เฉพาะหรือทุกคอลัมน์ ให้เรามีการควบคุมคอลัมน์ที่อยู่ในตารางมากขึ้น

คุณสมบัติ

คุณสมบัติ ColumnGroup ดังนี้ -

ไวยากรณ์

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

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

var x = document.createElement("COLGROUP");

ตัวอย่าง

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

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } #DIV1{ background-color:pink; } </style> </head> <body> <table id="TABLE1"> <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>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ colgroup พร้อม span = 2</p> <button onclick="colFun()">COLGROUP</button> <script> function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id", "DIV1"); x.setAttribute("span", "2"); document.getElementById("TABLE1").appendChild(x); } </script> </body> </html>

ผลลัพธ์

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

เมื่อคลิก COLGROUP -

ในตัวอย่างข้างต้น -

เราสร้างตารางที่มีสามแถวและสามคอลัมน์และ id "TABLE 1" เรายังใช้สไตล์บางส่วนกับตารางและองค์ประกอบลูกของมัน -

table, th, td { border: 1px solid black; } <table id="TABLE1"> <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>

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

<button onclick="colFun()">COLGROUP</button>

เมธอด colFun() สร้างองค์ประกอบ <colgroup> และกำหนดให้ตัวแปร x ใช้เมธอด setAttribute() บนองค์ประกอบ <colgroup> ที่สร้างใหม่ เรากำหนด id และ span เท่ากับ 2 เราจึงผนวกองค์ประกอบ <colgroup> เป็นลูกแรกของตารางโดยใช้เมธอด appendChild() บนองค์ประกอบ <table> -

function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id", "DIV1"); x.setAttribute("span", "2"); document.getElementById("TABLE1").appendChild(x); }