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

Thuộc tính colSpan HTML DOM liên kết với thuộc tính colspan bên trong phần tử <td> trong HTML. Sử dụng thuộc tính colSpan, chúng ta có thể thiết lập hoặc trả về thuộc tính colspan của một bảng. Thuộc tính colspan được dùng để tạo số lượng cột mà một bảng nên trải rộng.

Cú pháp

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

tabledataObject.colSpan = number

Ở đây, number đại diện cho số cột mà bảng nên trải rộng.

Ví dụ

Hãy xem một ví dụ cho thuộc tính colSpan:

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <h2>Tiết kiệm hàng tháng</h2> <table> <tr> <th>Tháng</th> <th>Tiết kiệm</th> </tr> <tr> <td class="TD1" colspan="2">Tháng một</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">Tháng hai</td> <td>$100</td> </tr> </table> <br> <button onclick="changeSpan()">THAY ĐỔI</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>

Kết quả

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

Khi nhấn THAY ĐỔI:

Trong ví dụ trên:

Chúng ta đã lấy một bảng nơi các phần tử đầu tiên bắt đầu từ hàng thứ hai, tức là Tháng một và Tháng hai đang có colspan bằng 2. Điều này làm cho bảng có ba hàng và ba cột. Bảng có kiểu dáng được áp dụng để làm cho nó trông khác biệt với những cái khác:

table, th, td { border: 1px solid blue; } <table> <tr> <th>Tháng</th> <th>Tiết kiệm</th> </tr> <tr> <td class="TD1" colspan="2">Tháng một</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">Tháng hai</td> <td>$100</td> </tr> </table>

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

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

Phương thức changeSpan() lấy cả hai phần tử <td> bằng phương thức getElementsByClassName() trên đối tượng document và sử dụng chỉ mục để truy cập cả hai. Sau đó nó lấy giá trị thuộc tính colSpan của cả hai phần tử <td> và thay đổi chúng từ 2 thành 1:

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