資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時裝研究
法律研究HTML DOM ColumnGroup span 屬性
HTML DOM ColumnGroup span 屬性與 HTML <colgroup> 元素的 span 屬性相關聯。ColumnGroup span 屬性設定或返回 column group 的 span 屬性值。span 屬性用於定義 <colgroup> 元素應該跨越的列數。
語法
以下是語法：
設定 ColumnGroup span 屬性：
columngroupObject.span = number
此處，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>輸出
將生成以下輸出：
單擊更改按鈕後：
在上面的示例中：
我們建立了一個有兩行三列的表格。該表格還對 table、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>我們建立了一個按鈕，該按鈕將在使用者單擊時執行方法 changeColor()。
<button onclick="changeColor()">CHANGE</button>
changeColor() 函式使用 getElementById() 方法並給出 <colgroup> 元素 id 作為引數來獲取 <colgroup> 元素。然後它將 <colgroup> 元素 span 設為 2，並將其背景顏色更改為綠色。這使得最左邊的兩列變為綠色，正如 <colgroup> 元素 span 屬性所指定的那樣
function changeColor() {
document.getElementById("Colgroup1").span = "2";
document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
}
更新於： 2019 年 8 月 7 日
74 次瀏覽
廣告