在JavaScript中使用DOM技术动态控制表格
来源：互联网 发布：linux命令执行返回值 编辑：程序博客网 时间：2024/05/17 08:59
相对于IE提供的对表格的insertCell、insertRow等方法，使用DOM显得可移植更好一些
下面的例子中，是一个3*2的表格，按下按钮后，删除第二行，然后再插入一个新行，该代码在IE6和FF下测试通过。
<html>
<head>
<title> Test Page </title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<table border="1" width="500">
<tbody id="tb1">
<tr id="tr1">
<td width="50%">1</td>
<td widht="50%"> </td>
</tr>
<tr id="tr2">
<td bgcolor="red">2</td>
<td> </td>
</tr>
<tr id="tr3">
<td>3</td>
<td> </td>
</tr>
<tbody>
</table>
<form name="form1">
<input type="button" value="test" onclick="test()" />
</form>
<script type="text/javascript">...
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>
下面的例子中，是一个3*2的表格，按下按钮后，删除第二行，然后再插入一个新行，该代码在IE6和FF下测试通过。
<html><head><title> Test Page </title><script type="text/javascript" src="prototype.js"></script></head><body><table border="1" width="500"><tbody id="tb1"> <tr id="tr1"> <td width="50%">1</td> <td widht="50%"> </td> </tr> <tr id="tr2"> <td bgcolor="red">2</td> <td> </td> </tr> <tr id="tr3"> <td>3</td> <td> </td> </tr><tbody></table><form name="form1"><input type="button" value="test" onclick="test()" /></form><script type="text/javascript">... 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>- 在JavaScript中使用DOM技术动态控制表格
- 在JavaScript中使用DOM技术动态控制表格
- 在JavaScript中使用DOM技术动态控制表格 .
- javascript学习1---用dom对象动态控制表格
- 使用JavaScript和DOM动态创建表格
- 使用JavaScript和DOM动态创建表格
- 使用JavaScript和DOM动态创建表格
- 使用JavaScript和DOM动态创建表格
- Dom + Javascript 在本机浏览器中对的表格数据进行排序
- 在JavaScript中使用DOM解析XML数据
- 在JavaScript中使用DOM解析XML数据 .
- 【JavaScript】---DOM创建表格
- 【JavaScript】DOM操作表格
- 在JavaScript中创建表格
- 在JavaScript中删除表格
- 分别使用innerHTML和DOM在网页中动态生成表格的三种不同方法。
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- 使用javascript DOM实现动态实现删除表格
- 强大的.NET反编译工具Reflector及插件
- PHP框架设计入门之三：页面模板
- 想要做好老板先要懂得怎样留住员工
- C#项目打包，并自动安装SQL数据库(VB.NET)
- C#窗口管理
- 在JavaScript中使用DOM技术动态控制表格
- Web.config文件详细说明
- 网通电信DNS地址
- 掌握 Ajax，第 1 部分: Ajax 入门简介 理解 Ajax 及其工作原理，构建网站的一种有效方法
- 总结几个产生上万流量的方法(SEO)
- 求职路上一(完结篇)
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 在 Web 请求中使用 XMLHttpRequest
- 人生态度
- 功能不错的分页存储过程，可支持多表查询，任意排序
