您的位置：首页 > 其它

示例-创建表格&使用表格对象

2014-06-11 00:27 411 查看

@charset "utf-8";
/* CSS Document */
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}

-----html端---

<style type="text/css">
@import url(css.css);
</style>
</head>

<body>

<script type="text/javascript">
function crtTable(){
/*
*思路：
*可以通过之前学过的createElement创建元素的形式来完成。
*/
//1、创建表格节点。
var oTabNode = document.createElement("table");

//2、创建tBody节点。
var oTbdNode = document.createElement("tbody");

//3、创建行节点。
var oTrNode = document.createElement("tr");

//4、创建单元格节点。
var oTdNode = document.createElement("td");

oTdNode.innerHTML = "这是一个单元格";

//让这些节点有关系。进行指定层次的节点添加。
oTrNode.appendChild(oTdNode);

oTbdNode.appendChild(oTrNode);

oTabNode.appendChild(oTbdNode);

document.getElementsByTagName("div")[0].appendChild(oTabNode);

}

function crtTable(){
var oTabNode = document.createElement("table");

for(var x=1;x<=5;x++){
var oTrNode = oTabNode.insertRow();
for(var y =1;y<=6;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"---"+y;
}
}

//将表格节点添加到div中。
document.getElementsByTagName('div')[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled=true;
}

</script>

<input type="button" value="创建表格" name="crtBut" onclick="crtTable()" />
<hr/>
<div></div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航