解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
来源:互联网 发布:外汇文字指标软件 编辑:程序博客网 时间:2024/05/29 03:55
本机只有ie7,ff3.5,opera10,测试在这三个环境中测试通过。
在标准DOM中添加元素一般使用appendChild();
但用js在table中添加行时却失效了。
网上搜了一下说 ie6,ie7不支持table.appendChild("tr")
那在JavaScript中怎么在一个table中添加一行呢?
在http://www.w3schools.com/htmldom/dom_obj_table.asp看到w3c文档中HTML DOM Object存在tableObject.insertRow(index)方法。何不在插入行时用这个方法呢,毕竟在html中table比普通的标签有其特殊性,碰到table添加一行时,注意使用insertRow而不是appendChild,这样代码才能使用更多浏览器。看下面一段代码:
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript">
- function insRow()
- {
- var tbl = document.getElementById('myTable');
- var row = tbl.insertRow(0);
- var cell = row.insertCell(0);
- cell.innerHTML="new cell";
- }
- </script>
- </head>
- <body>
- <table id="myTable" border="1">
- <tr>
- <td>
- cell
- </td>
- </tr>
- </table>
- <br />
- <input type="button" onclick="insRow()" value="Insert row">
- </body>
- </html>
<!DOCTYPE html><html><head><script type="text/javascript">function insRow(){var tbl = document.getElementById('myTable');var row = tbl.insertRow(0);var cell = row.insertCell(0);cell.innerHTML="new cell";}</script></head><body><table id="myTable" border="1"><tr><td>cell</td></tr></table><br /><input type="button" onclick="insRow()" value="Insert row"></body></html>
比使用标准的DOM还简单,而且也符合w3c标准,但有一点要说明的是:
innerHTML这个方法虽然没有在w3c文档中出现,但是由于使用的广泛性,很多浏览器都进行了支持,添加文本节点(text nodes)时可以用innerHTML,如果非要符合w3c标准,可以用createTextNode(str)方法,本例中在JavaScript最后一行改为:cell.appendChild(document.createTextNode("new cell"))。
但是上面的例子还有一个与appendChild()不同的地方,就是appendChild值插在原有元素的后面,但是例子中是插在了第一行。怎么插在表格的最后一行,或者插在当前行的后一行或者前一行怎么做呢?
只要实例中把javascript改为:var row = tbl.insertRow(tbl.rows.length);
下面附加一段带有 在最后加一行,本行前前加一行,本行后加一行,删除当前行的html代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">
- <script type="text/javascript">
- var i=0;
- function insRow(){
- var tbl = document.getElementById("myTable");
- insRowIndex(tbl.rows.length);
- }
- function insRowIndex(rowIndex){
- var tbl = document.getElementById("myTable");
- var row = tbl.insertRow(rowIndex);
- var cell0 = row.insertCell(0);
- var cell1 = row.insertCell(1);
- cell0.innerHTML = "cell " + i++;
- cell1.innerHTML = " <input type='button' value='delete' onclick='delRow(this)'>"
- +"<input type='button' value='insBefore' onclick='insBefore(this)'>"
- +"<input type='button' value='insAfter' onclick='insAfter(this)'>";
- }
- function delRow(row){
- var tbl = document.getElementById("myTable");
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- tbl.deleteRow(rowIndex);
- }
- function insBefore(row){
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- insRowIndex(rowIndex)
- }
- function insAfter(row){
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- insRowIndex(rowIndex+1)
- }
- </script>
- </head>
- <body>
- <table id="myTable" border="1">
- <tr>
- <td>
- 单元格
- </td>
- <td>
- 操作
- </td>
- </tr>
- </table>
- <br />
- <input type="button" onclick="insRow()" value="Insert row">
- </body>
- </html>
- 解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
- 解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
- 解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
- FAQ_IE 8中还不支持JavaScript通过appendChild("tr')方法添加Table行
- js中document.body.appendChild在IE6下不兼容的替换方法
- js中appendChild()方法
- js动态给table添加行(tr)
- js控制table tr 的方法
- Table中删除Tr的JS实现
- 解决IE6,IE7不能隐藏绝对定位溢出的内容
- IE中table标签不支持javascript的appendChild方法
- IE6 IE7: div中 table 宽度100% 引发的血案
- js实现table添加行tr、删除行tr、清空行tr
- JS技巧:JS区别IE6、IE7、IE8之间的方法
- js向table表格中添加tr行代码(分页有待改善)
- 转js动态给table添加行(tr)
- 利用AJAX生成自动添加tr的table,并且为添加的tr附加上方法
- js动态创建table节点并通过appendChild拼接子元素的问题
- JQuery -- this 和 $(this) 的区别
- 指针大小还有sizeof
- 检查intent的响应者是否存在
- JavaScript 实现 Map 对象(Key-Value)
- SQl 跨服务器查询语句和跨数据创建表
- 解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
- echo 和 @ 回显控件命令
- 没有分了,怎么办?
- 部分问题解决方案整理
- http://acm.nyist.net/JudgeOnline/problem.php?pid=38&&最小生成树
- 系统工程师应该准备的细节
- 本地管理表空间
- android 电池管理之个人理解
- Exporting System or Composite Partitioned Table Using Classic Export Gives EXP-6 AND EXP-0