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>

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

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容