数据结构
网络
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 次浏览
广告