数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM 列对象
HTML DOM 列对象与 HTML <col> 元素相关。列对象用于获取或设置 <col> 元素的属性。<col> 标记只能在 <table> 元素内使用。
属性
以下为列对象的属性 −
| 属性 | 说明 |
|---|---|
| 跨度 | 设置或返回某列的跨度属性值。 |
语法
以下为语法 −
创建列对象 −
var a = document.createElement("COL");示例
让我们来看一个列对象的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
#Col1{
background-color:pink;
}
</style>
</head>
<body>
<h3>COL OBJECT</h3>
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>
<p>Click the below button to get span of the "COL1" col element</p>
<button onclick="colObj()">COLUMN</button>
<p id="Sample"></p>
<script>
function colObj() {
var x = document.getElementById("Col1").span;
document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}
</script>
</body>
</html>输出
这将生成以下输出 −
点击 COLUMNS 按钮 −
在上面的示例中，我们创建了一个包含 2 行 3 列的表格。表格整体应用了某个样式。在表格内部，我们有两个 <col> 元素，其中一个的 span 等于 2，另一个应用了某个内联样式。由于第一个 <col> 的 span 等于 2，其样式将应用于恰好两列，而第二个 <col> 将其样式应用于剩余的列 −
table, th, td {
border: 1px solid blue;
}
#Col1{
background-color:pink;
}
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>然后我们创建了一个按钮 COLUMNS，用户点击时将执行 colObj() 方法 −
<button onclick="colObj()">COLUMN</button>
colObj() 方法使用 getElementById() 方法对文档对象获取第一个 <col> 元素。然后获取 <col> 元素的 span 属性值，并将其赋值给变量 x。然后使用段落的 innerHTML 属性在 ID 为 “Sample” 的段落中显示存储在变量 x 中的 span 属性值 −
function colObj() {
var x = document.getElementById("Col1").span;
document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}
更新时间:20-Feb-2021
88 浏览量
广告