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

HTML DOM ColumnGroup span 屬性與 HTML <colgroup> 元素的 span 屬性相關聯。 ColumnGroup span 屬性設置或返回列組的 span 屬性值。 span 屬性用於定義 <colgroup> 元素應該跨越的列數。

用法

以下是語法 -

設置 ColumnGroup 跨度屬性 -

columngroupObject.span = number

這裏，數字指定 <colgroup> 元素應該跨越的列數。

示例

讓我們看一個 ColumnGroup span 屬性的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border:1px solid blue;
   }
</style>
</head>
<body>
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>
<p>lick the button to change the background color of the first two columns.
<button onclick="changeColor()">CHANGE</button>
<script>
   function changeColor() {
      document.getElementById("Colgroup1").span = "2";
      document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改按鈕 -

在上麵的例子中 -

我們創建了一個兩行三列的表格。還有一些樣式應用於表格、th 和 td 元素 -

table, th, td {
   border:1px solid blue;
}
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>

然後我們創建了一個按鈕 CHANGE，當用戶點擊它時將執行 changeColor() 方法。

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

changeColor() 函數使用 getElementById() 方法獲取 <colgroup> 元素，並提供 <colgroup> 元素 ID 作為參數。然後將 <colgroup> 元素的 span 設置為 2 並將其背景顏色更改為綠色。這使 <colgroup> 元素的 span 屬性指定的左起前兩列變為綠色：

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

相關用法

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