动态产生表格（节点创建）

来源：互联网发布：cad截图软件betterwmf 编辑：程序博客网时间：2024/05/17 23:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
table{border:1px #FF0000 groove;}
td{border:1px #0000FF dotted}
.r1{border:1px #0000FF dotted;background-color:#FFFFFF;}
.r2{background-color:#00FFFF;};
</style>
<script>
function createTale(row,col){
var row=document.getElementById("row").value;
var col=document.getElementById("col").value;
var table=document.createElement("table");
var body=document.getElementsByTagName("body")[0];
for(i=0;i<row;i++){
var tr=document.createElement("tr");
for(var j=0;j<col;j++){
var td=document.createElement("td");
td.innerText="列"+(j+1);
tr.appendChild(td);
}
table.appendChild(tr);
}
body.appendChild(table);
changeColor();
}
function changeColor(){
var tr=document.getElementsByTagName("tr");
for(i=0;i<tr.length;i++){
if(i%2==0)
tr[i].className="r1";
else
tr[i].className="r2";
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<input type="text" id="row" />row<input type="text" id="col" />col<input type="button" value="点击我" onclick="createTale(8,8)"/>
</body>
</html>

0 0