JavaScript中使用DOM编程技术动态控制表格 -JAVASCRIPT-编程相关-IT知道网(http://www.itwis.com)

JavaScript中使用DOM编程技术动态控制表格

来源：发布时间：2008-04-02 发布人：浏览：人次字体： [大中小]

在JavaScript中使用DOM编程技术动态控制表格,相对于IE提供的对表格的insertCell、insertRow等方法，使用DOM显得可移植更好一些

下面的例子中，是一个3*2的表格，按下按钮后，删除第二行，然后再插入一个新行，该代码在IE6和FF下测试通过。

<html>

<head>

</head>

<body>

</tr>

</tr>

</tr>

<tbody>

</table>

</form>

function test()

{

var frm = document.form1;

var tb = document.getElementById("tb1"); //获取表格对象

var trs = tb.getElementsByTagName("tr"); //获取所有的<tr>

var del_tr = trs[1]; //设定删除第2行

var tr = tb.removeChild(del_tr); //删除第2行

var new1 = document.createElement("tr"); //新建一行

tb.appendChild(new1);

var new_td1 = document.createElement("td"); //在新建行中添加单元格

new_td1.style.color = "blue"; //新建行的第1个单元格字体设为蓝色

new_td1.setAttribute("align", "center"); //新建行的第1个单元格的对齐方式设为居中

new_td1.innerHTML = "aa"; //新建行第1个单元格内容

new1.appendChild(new_td1);

var new_td2 = document.createElement("td"); //添加第2个单元格

new_td2.innerHTML = " ";

new_td2.style.backgroundColor = "red"; //设定背景色为红色

new1.appendChild(new_td2);

tb.appendChild(new1);

}

</script>

</body>

</html>

【↑返回顶部】【文章评论(0条)】【收藏本文】【打印本文】【关闭窗口↓】

↑上一篇：javascript实现firefox和IE都支持的页面局部打印

↓下一篇：javascript网页对话框参数详解

发布商链接

·javascript网页对话框参数详解
·javascipt实现金额大小写的转换
·实例分析JavaScript中substr和substr...
·js实现select表单动态添加,删除操作...
·javascript清空网页代码防止查看源代...
·javascript实现WORD里面的斜线表格代...
·javascript实现点击验证码无刷新重新...
·javascript处理图片加载失败代码
·javascrpt获取选中的内容代码
·如何防止页面被别人的frame引用？

§最新评论:（评论内容只代表网友观点，与本站立场无关！）

网名：验证码：

【所有评论】【↑返回顶部】

评　分： 12 345

评论内容：(不能超过500字，请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]

注意:请勿在本站发布政治话题、色情及违反法律的内容。

IT知道网声明：刊登此文章是为了传递更多信息，文章内容仅供参考，转载请注明出处。


首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视

编程学堂> JAVA专区 \| .NET专区 \| PHP 专区 \| ASP 专区 \| C/C++ \| JAVASCRIPT \| 数据库 \| 软件工程 \| 网络技术 \| 网站制作 \| 编程相关 \| 硬件资讯
业界相关> 业界新闻 \| 操作系统 \| 办公技巧 \| 病毒安全 \| 图形图像 \| 常用工具 \| 资源下载 \| 网站推广 \| 即时通讯 \| IT故事 \| IT健康 \| QQ---MSN