js浏览器兼容性问题
来源:互联网 发布:血战到底麻将算法 编辑:程序博客网 时间:2024/05/19 14:37
在标准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>
- js浏览器兼容性问题
- 浏览器兼容性问题-JS&DOM
- 浏览器兼容性问题-JS&DOM
- js浏览器兼容性问题
- 浏览器兼容性问题-JS&DOM
- JS浏览器兼容性问题
- 浏览器兼容性问题css+js
- js 浏览器兼容性问题
- JS浏览器兼容性问题
- js浏览器兼容性问题
- JS 浏览器兼容性问题汇总
- JS浏览器兼容性问题
- JS浏览器兼容性问题汇总
- JS中浏览器兼容性问题
- 浏览器兼容性问题-JS&DOM(转)
- css js 在不同浏览器兼容性问题总结
- css js 在不同浏览器兼容性问题总结
- CSS、JS在不同浏览器的兼容性问题
- 调试
- Java设计模式
- 如何安装Node.js
- 2005中TCP/IP协议与Sql Server(Express)服务冲突
- 时间变慢了
- js浏览器兼容性问题
- STL 各容器成员对比表
- 浅谈企业应用架构(一)
- js随记----将confirm的“确认”“取消”修改成“是”“否”
- 后台调用前台js传参
- android笔记 spinner的动态增加与删除
- 配置Java环境变量
- 浅谈企业应用架构(二)
- Java逐帧动画播放器V0.1.0