设为首页收藏本站
开启辅助访问 切换到宽版

新微赢技术网

 找回密码
 注册
快捷导航
搜索
热搜: 回贴
新微赢技术网»论坛 › 学习网 知识堂 › WEB开发 › ASP › 利用DOM生成表格的两个方法的小实验(新手可以参考)
返回列表 发新帖
查看: 43|回复: 1
打印 上一主题 下一主题

利用DOM生成表格的两个方法的小实验(新手可以参考)

[复制链接]
跳转到指定楼层
1#
发表于 2010-1-15 03:56:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<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>
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

申请友链|小黑屋|最新主题|手机版|新微赢技术网 ( 苏ICP备08020429号 )  

GMT+8, 2024-11-20 07:20 , Processed in 0.113577 second(s), 9 queries , Gzip On, Memcache On.

Powered by xuexi

© 2001-2013 HaiAn.Com.Cn Inc. 寰耽

快速回复 返回顶部 返回列表