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

本机只有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代码  复制代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript">  
  5.         function insRow()   
  6.         {   
  7.             var tbl = document.getElementById('myTable');   
  8.             var row = tbl.insertRow(0);   
  9.             var cell = row.insertCell(0);   
  10.             cell.innerHTML="new cell";   
  11.         }   
  12. </script>  
  13.     </head>  
  14.   
  15.     <body>  
  16.         <table id="myTable" border="1">  
  17.             <tr>  
  18.                 <td>  
  19.                     cell   
  20.                 </td>  
  21.             </tr>  
  22.         </table>  
  23.         <br />  
  24.         <input type="button" onclick="insRow()" value="Insert row">  
  25.     </body>  
  26. </html>  
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript">  
  5.         function insRow()  
  6.         {  
  7.             var tbl = document.getElementById('myTable');  
  8.             var row = tbl.insertRow(0);  
  9.             var cell = row.insertCell(0);  
  10.             cell.innerHTML="new cell";  
  11.         }  
  12. </script>  
  13.     </head>  
  14.   
  15.     <body>  
  16.         <table id="myTable" border="1">  
  17.             <tr>  
  18.                 <td>  
  19.                     cell  
  20.                 </td>  
  21.             </tr>  
  22.         </table>  
  23.         <br />  
  24.         <input type="button" onclick="insRow()" value="Insert row">  
  25.     </body>  
  26. </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代码  复制代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">  
  5.         <script type="text/javascript">  
  6.         var i=0;   
  7.         function insRow(){   
  8.             var tbl = document.getElementById("myTable");   
  9.             insRowIndex(tbl.rows.length);   
  10.         }   
  11.         function insRowIndex(rowIndex){   
  12.             var tbl = document.getElementById("myTable");   
  13.             var row = tbl.insertRow(rowIndex);   
  14.             var cell0 = row.insertCell(0);   
  15.             var cell1 = row.insertCell(1);   
  16.             cell0.innerHTML = "cell " + i++;   
  17.             cell1.innerHTML = " <input type='button' value='delete' onclick='delRow(this)'>"  
  18.                                 +"<input type='button' value='insBefore' onclick='insBefore(this)'>"   
  19.                                 +"<input type='button' value='insAfter' onclick='insAfter(this)'>";   
  20.         }   
  21.         function delRow(row){   
  22.             var tbl = document.getElementById("myTable");   
  23.             var rowrowIndex =  row.parentNode.parentNode.rowIndex;   
  24.             tbl.deleteRow(rowIndex);   
  25.         }   
  26.         function insBefore(row){   
  27.             var rowrowIndex =  row.parentNode.parentNode.rowIndex;   
  28.             insRowIndex(rowIndex)   
  29.         }   
  30.         function insAfter(row){   
  31.             var rowrowIndex =  row.parentNode.parentNode.rowIndex;   
  32.             insRowIndex(rowIndex+1)   
  33.         }   
  34. </script>  
  35.     </head>  
  36.   
  37.     <body>  
  38.         <table id="myTable" border="1">  
  39.             <tr>  
  40.                 <td>  
  41.                     单元格   
  42.                 </td>  
  43.                 <td>  
  44.                     操作   
  45.                 </td>  
  46.             </tr>  
  47.         </table>  
  48.         <br />  
  49.         <input type="button" onclick="insRow()" value="Insert row">  
  50.     </body>  
  51. </html> 

你可能感兴趣的:(JavaScript,html,浏览器,IE,table)