您的位置:首页 > 教程笔记 > 前端笔记

JavaScript 动态设置colSpan

2023-12-04 13:50:50 前端笔记 73

本章节介绍分享一段实例,它实现了table的colSpan值的设置。

关于colspan属性可以参阅colspan用法详解一章节。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<script>
function setColSpan(){
  var tds=document.getElementById('myTable').rows[0].cells;
  tds[0].colSpan="2";
  tds[1].colSpan="6";
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    setColSpan()
  }
}
</script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td colspan="4">标题一</td>
    <td colspan="4">标题二</td>
  </tr>
  <tr>
    <td>实例一</td>
    <td>实例二</td>
    <td>实例三</td>
    <td>实例四</td>
    <td>实例五</td>
    <td>实例六</td>
    <td>实例七</td>
    <td>实例八</td>
  </tr>
</table>
<form>
 <input type="button" id="bt" value="查看效果"/>
</form>
</body>
</html>

上述代码,点击按钮即可完成设置功能。

相关推荐