您的位置：首页 > 移动开发

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

2013-07-16 16:13 621 查看

本文转自：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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