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

@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>
<!--在页面中创建一个5行6列的表格
1、事件源，比如按钮
2、必须有一个生成的表格节点存储位置。
-->
<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>

posted @ 2014-06-11 00:27  是但哥  阅读(335)  评论(0)    收藏  举报