解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法

来源：互联网发布：手机淘宝店招尺寸2017 编辑：程序博客网时间：2024/06/02 20:33

本文转自：http://blog.csdn.net/xiaoning8201/article/details/6884201

本机只有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>