Thuộc tính khoảng cột DOM HTML

Thuộc tính DOM Column span trong HTML được liên kết với thuộc tính colspan bên trong phần tử trong HTML. Sử dụng thuộc tính colSpan, chúng ta có thể đặt hoặc trả về thuộc tính colspan của một bảng. Thuộc tính colspan được sử dụng để tạo số không. trong số các cột mà một bảng sẽ kéo dài đến.

Cú pháp

Sau đây là cú pháp cho -

tabledataObject.colSpan = number

Ở đây, số đại diện cho số cột mà bảng sẽ kéo dài đến.

Ví dụ

Hãy để chúng tôi 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>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>

Đầu ra

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

Thuộc tính khoảng cột DOM HTML

Khi nhấp vào THAY ĐỔI -

Thuộc tính khoảng cột DOM HTML

Trong ví dụ trên -

Chúng tôi đã lấy một bảng trong đó các phần tử đầu tiên bắt đầu từ hàng thứ hai, tức là tháng Giêng và tháng Hai 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ó một kiểu được áp dụng để làm cho nó trông khác với những bảng khác -

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>

Sau đó, chúng tôi đã tạo nút CHANGE sẽ thực thi phương thức changeSpan () khi người dùng nhấp vào -

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

Phương thức changeSpan () nhận cả hai phần tử

bằng cách sử dụng phương thức getElementsByClassName () trên đối tượng tài liệu và sử dụng lập chỉ mục để truy cập cả hai phần tử đó. Sau đó, nó nhận giá trị thuộc tính colSpan của cả hai phần tử

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";
   }
}