คุณสมบัติ HTML DOM Column span (colSpan)

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

ไวยากรณ์

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

tabledataObject.colSpan = number

ที่นี่ number แทนจำนวนคอลัมน์ที่ตารางควรครอบคลุม

ตัวอย่าง

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

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <h2>Monthly Savings</h2> <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td class="TD1" colspan="2">January</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">February</td> <td>$100</td> </tr> </table> <br> <button onclick="changeSpan()">CHANGE</button> <script> var x = document.getElementsByClassName("TD1").length; function changeSpan() { for(var i=0; i<=x; i++){ document.getElementsByClassName("TD1")[i].colSpan = "1"; } } </script> </body> </html>

ผลลัพธ์

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

เมื่อคลิก CHANGE -

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

เราใช้ตารางที่องค์ประกอบแรกเริ่มจากแถวที่สองคือ January และ February มี colspan เท่ากับ 2 ทำให้ตารางมีสามแถวและสามคอลัมน์ ตารางมีสไตล์ที่ใช้กับมันเพื่อให้ดูแตกต่างจากอื่นๆ -

table, th, td { border: 1px solid blue; } <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td class="TD1" colspan="2">January</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">February</td> <td>$100</td> </tr> </table>

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

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

เมธอด changeSpan() ดึงทั้งสององค์ประกอบ <td> โดยใช้ getElementsByClassName() บนอ็อบเจกต์เอกสารและใช้การเข้าถึงดัชนีเพื่อเข้าถึงทั้งสอง มันจึงดึงค่าแอตทริบิวต์ colSpan ของทั้งสององค์ประกอบ <td> และเปลี่ยนจาก 2 เป็น 1 -

var x = document.getElementsByClassName("TD1").length; function changeSpan() { for(var i=0; i<=x; i++){ document.getElementsByClassName("TD1")[i].colSpan = "1"; } }