Thuộc tính span của ColumnGroup HTML DOM

Thuộc tính span của ColumnGroup HTML DOM liên kết với thuộc tính span của phần tử HTML <colgroup>. Thuộc tính span của ColumnGroup thiết lập hoặc trả về giá trị của thuộc tính span của một nhóm cột. Thuộc tính span được dùng để xác định số cột mà phần tử <colgroup> nên trải rộng.

Cú pháp

Cú pháp sau đây dùng cho:

Thiết lập thuộc tính span của ColumnGroup:

columngroupObject.span = number

Ở đây, number chỉ định số cột mà phần tử <colgroup> nên trải rộng.

Ví dụ

Hãy xem một ví dụ cho thuộc tính span của ColumnGroup:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Trái cây</th> <th>MÀU</th> <th>Giá</th> </tr> <tr> <td>Dưa hấu</td> <td>Xanh đậm</td> <td>40Rs</td> </tr> <tr> <td>Đu đủ</td> <td>Vàng</td> <td>30Rs</td> </tr> </table> <p>Nhấn nút để thay đổi màu nền của hai cột đầu tiên. <button onclick="changeColor()">THAY ĐỔI</button> <script> function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút THAY ĐỔI:

Trong ví dụ trên:

Chúng ta đã tạo một bảng với hai hàng và ba cột. Cũng có một số kiểu dáng được áp dụng cho bảng, th và td:

table, th, td { border: 1px solid blue; } <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Trái cây</th> <th>MÀU</th> <th>Giá</th> </tr> <tr> <td>Dưa hấu</td> <td>Xanh đậm</td> <td>40Rs</td> </tr> <tr> <td>Đu đủ</td> <td>Vàng</td> <td>30Rs</td> </tr> </table>

Chúng ta đã tạo nút THAY ĐỔI sẽ thực thi phương thức changeColor() khi được nhấp bởi người dùng:

<button onclick="changeColor()">THAY ĐỔI</button>

Hàm changeColor() lấy phần tử <colgroup> bằng phương thức getElementById() và đưa id của phần tử <colgroup> làm tham số. Sau đó nó đặt span của phần tử <colgroup> thành 2 và thay đổi màu nền của nó thành xanh lá. Điều này làm cho hai cột đầu tiên từ bên trái trở nên xanh lá như được chỉ định bởi thuộc tính span của phần tử <colgroup>:

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