HTML DOM 列 span 属性

HTML DOM 列 span 属性与 HTML 中 <td> 元素内的 colspan 属性相关联。使用 colSpan 属性，我们可以设置或返回表格的 colspan 属性。colspan 属性用于指定表格应跨越的列数。

语法

以下是语法 −

tabledataObject.colSpan = number

其中，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>

然后，我们创建了"更改"按钮，当用户点击该按钮时，它将执行 changeSpan() 方法 −

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

changeSpan() 方法使用 document 对象上的 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";
   }
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/