新微赢技术网
标题:
利用DOM生成表格的两个方法的小实验(新手可以参考)
[打印本页]
作者:
飘香剑雨
时间:
2010-1-15 03:56
标题:
利用DOM生成表格的两个方法的小实验(新手可以参考)
<html>
<head>
<title>Dom</title>
<meta name="Generator" content="EditPlus">
<style type="text/css">
body
{
font-size:14px;
}
</style>
<script language="JavaScript">
<!--
function CreateTable()
{
var Main = document.body;
//单元格1
var value = document.createTextNode("自动生成的单元格1");
var td = document.createElement("td");
//单元格2
var value1= document.createTextNode("自动生成的单元格2");
var td1 = document.createElement("td");
//行1
var tr = document.createElement("tr");
var tb = document.createElement("tbody");
var ta = document.createElement("table");
ta.border="0";
ta.style.backgroundColor="#ff0000";
ta.style.fontSize="14px";
ta.cellPadding="3";
ta.cellSpacing="1";
ta.width="500px";
ta.align="center";
tr.style.backgroundColor="#ffffff";
td.appendChild(value);
td1.appendChild(value1);
tr.appendChild(td);
tr.appendChild(td1)
tb.appendChild(tr);
ta.appendChild(tb);
Main.appendChild(ta);
}
function InsertInToTable()
{
var Num=parseInt(document.getElementById("Num").value);
for (var i = 1;i <= Num;i++)
{
var value = document.createTextNode("测试数据" + i);
var td = document.createElement("td");
var tr = document.createElement("tr");
var tb = document.createElement("tbody");
var ta = document.getElementById("t1");
tr.style.backgroundColor="#ffffff";
tr.style.fontSize="14px";
td.appendChild(value);
tr.appendChild(td);
tb.appendChild(tr);
//ta.appendChild(tb); //放开这个注释，然后注释掉下面的语句，就可以在当前行的下面生成新的行
ta.insertBefore(tb,ta.firstChild); //生成新的行在当前的行的上方
}
}
//-->
</script>
</head>
<body OnLoad="CreateTable();">
<table width="500" cellspacing="1" cellpadding="3" bgcolor="#ff0000" id="t1" align="center">
<tr bgcolor="#ffffff" style="font-size:14px;">
<td>增加<input type="text" size="2" id="Num">行 <input type="button" value=" 开始 " OnClick="InsertInToTable();"></td>
</tr>
</table>
<br>
</body>
</html>
欢迎光临 新微赢技术网 (http://bbs.weiying.cn/)
Powered by Discuz! X3.2