JavaScript 动态设置colSpan

快乐打工仔 分类:实例代码

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

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

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

回复

我来回复
  • 暂无回复内容