คุณสมบัติ HTML DOM ColumnGroup span

คุณสมบัติ HTML DOM ColumnGroup span เกี่ยวข้องกับแอตทริบิวต์ span ขององค์ประกอบ HTML <colgroup> คุณสมบัติ ColumnGroup span ตั้งหรือคืนค่าของแอตทริบิวต์ span ของกลุ่มคอลัมน์ แอตทริบิวต์ span ใช้กำหนดจำนวนคอลัมน์ที่องค์ประกอบ <colgroup> ควรครอบคลุม

ไวยากรณ์

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

การตั้งค่าคุณสมบัติ ColumnGroup span -

columngroupObject.span = number

ที่นี่ number ระบุจำนวนคอลัมน์ที่องค์ประกอบ <colgroup> ควรครอบคลุม

ตัวอย่าง

ลองดูตัวอย่างสำหรับคุณสมบัติ ColumnGroup span -

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table> <p>คลิกปุ่มเพื่อเปลี่ยนสีพื้นหลังของสองคอลัมน์แรก <button onclick="changeColor()">CHANGE</button> <script> function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; } </script> </body> </html>

ผลลัพธ์

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

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

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

เราสร้างตารางที่มีสองแถวและสามคอลัมน์ มีการจัดสไตล์บางส่วนให้กับตาราง th และ td -

table, th, td { border: 1px solid blue; } <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table>

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

<button onclick="changeColor()">CHANGE</button>

ฟังก์ชัน changeColor() ดึงองค์ประกอบ <colgroup> โดยใช้เมธอด getElementById() และให้ id ขององค์ประกอบ <colgroup> เป็นพารามิเตอร์ จากนั้นตั้งค่า span ขององค์ประกอบ <colgroup> เป็น 2 และเปลี่ยนสีพื้นหลังเป็นสีเขียวอ่อน ทำให้คอลัมน์แรกสองคอลัมน์จากซ้ายเป็นสีเขียวตามที่ระบุโดยแอตทริบิวต์ span ขององค์ประกอบ <colgroup> -

function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; }