解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
2011-10-18 13:28
846 查看
本机只有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,这样代码才能使用更多浏览器。看下面一段代码:
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代码
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>
在标准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,这样代码才能使用更多浏览器。看下面一段代码:
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>
<!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代码
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行的方法
- FAQ_IE 8中还不支持JavaScript通过appendChild("tr')方法添加Table行
- QT中添加Q_OBJECT时编译提示obj : error LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject const错误解决方法
- 解决IE9以下ie版本不能识别新元素的方法 添加一个js -- Shiv Solution
- IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决的方法
- 通过findViewById()方法从layout中获取view并进行相应的转换时提示:"Cannot cast from View to AutoCompleteTextView"的解决办法!
- 文件夹Form开发遇到的"FRM-41081:不能移动项,无效位置"的解决方法
- ie6、ie7、ie8下支持js 使用vml style.addRule('v\\:line,v\\:stroken',"behavior:url(#default#VML);")
- vc6.0无法使用“添加到工程”或者"打开文件"解决方法
- js动态添加元素之后jquery mobile不能正确渲染解决方法 和 JM checked全选反选
- 解决错误"不能添加其键已在使用中的实体"
- 不能将 "const char *" 类型的值分配到 "LPCWSTR" 类型的实体 错误解决方法
- JS调用WebService提示"未定义"的解决方法
- Sharepoint 站点下应用程序虚拟路径下出现"不能进行输出缓存处理",错误ID 5787 解决方法
- 安装JDK出现"Windows Installer程序包有问题,此安装需要的DLL不能运行"解决方法
- 关于小红伞免费V9简体中文版、v10 出现“SSL"提示不能安装的解决方法
- ISA 2004 防火墙自己不能上网,提示"错误代码:12206 代理链循环"的解决方法
- 关于添加android:name="android.permission.INSTALL_PACKAGES"报错的解决方法
- vs2005 "automation服务器不能创建对象"解决方法.