HTML DOM Column span屬性用法及代碼示例

HTML DOM Column span 屬性與 HTML 中 <td> 元素內的 colspan 屬性相關聯。使用 colSpan 屬性，我們可以設置或返回表的 colspan 屬性。 colspan 屬性用於創建編號。表應該跨越的列數。

用法

以下是語法 -

tabledataObject.colSpan = 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>

輸出

這將產生以下輸出 -

單擊更改 -

在上麵的例子中 -

我們采用了一個表格，其中從第二行開始的第一個元素，即一月和二月的 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() 方法使用文檔對象上的 getElementsByClassName() 方法獲取 <div> 元素並使用索引來訪問它們。然後它獲取兩個 <div> 元素的 colSpan 屬性值並將它們從 2 更改為 1 -

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

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Column span Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。