js动态创建table的问题

我想在table 中动态添加行，在fireFox 调试通过后在IE6下运行却失效了
请大家看看出了什么问题
<html>
<head>
<title>动态添加行</title>
<style type="text/css">
table{width:100px;border-collapse:collapse;}
td{border:1px black solid;}
</style><script type="text/javascript">
function insertTr()
{
var tableObj = document.getElementById("tab");
var trObj = document.createElement("tr");
//添加td1
var tdObj1 = trObj.insertCell(0);
var textObj = document.createElement("input");
textObj.setAttribute("type","text");
tdObj1.appendChild(textObj);//======================在IE6下执行这一句的时候停止了，为什么呢
//添加td2
var tdObj2 = trObj.insertCell(1);
var textObj1 = document.createElement("input");
textObj1.setAttribute("type","text");
tdObj2.appendChild(textObj1);

tableObj.appendChild(trObj);
}
</script>
</head>
<body>
<table id="tab">
<tr>
<td style="width:50%">123</td>
<td style="width:50%">321</td>
</tr>
</table>
<input type="button" onclick="insertTr();" /></body>
</html>

解决方案 »

  1.   

    改成insertRow()比较保险。IE 7版本以下的浏览器关于appendChild()有胎里带的BUG，主要是子节点更改父节点结构的问题。一不小心就中招，呵呵。IE8已修正你可以到微软网站去看看
      

  2.   

    insertRow() 方法用于在表格中的指定位置插入一个新行。语法
    tableObject.insertRow(index)
    返回值
    返回一个 TableRow，表示新插入的行。说明
    该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
      

  3.   


    <html>
    <head>
    <title>动态添加行</title>
    <style type="text/css">
    table{width:100px;border-collapse:collapse;}
    td{border:1px black solid;}
    </style><script type="text/javascript">
    function insertTr()
    {
        var tableObj = document.getElementById("tab");
        var trObj = document.createElement("tr");
        //添加td1
        var tdObj1 = document.createElement("td");
        var textObj = document.createElement("input");
        textObj.setAttribute("type","text");
        tdObj1.appendChild(textObj);
    trObj.appendChild(tdObj1);
        //添加td2
        var tdObj2 = document.createElement("td");
        var textObj1 = document.createElement("input");
        textObj1.setAttribute("type","text");
        tdObj2.appendChild(textObj1);
        trObj.appendChild(tdObj2);
        tableObj.appendChild(trObj);
        if(document.all) tableObj.outerHTML = tableObj.outerHTML
    }
    </script>
    </head>
    <body>
    <table id="tab">
        <tr>
            <td style="width:50%">123</td>
            <td style="width:50%">321</td>
        </tr>
    </table>
    <input type="button" onclick="insertTr();" /></body>
    </html>
      

  4.   

    四楼好厉害
    能不能讲一下
    if(document.all) tableObj.outerHTML = tableObj.outerHTML
    这句是什么意思
    谢谢
      

  5.   

    if(document.all) 相当于判断浏览器，因为在ff下是没这个方法的，IE下才有，IE下加入tableObj.outerHTML = tableObj.outerHTM 保证标签append正确
      

  6.   

    if(document.all) 相当于判断浏览器
      

  7.   


    <html>
    <head>
    <title>动态添加行</title>
    <style type="text/css">
    table{width:100px;border-collapse:collapse;}
    td{border:1px black solid;}
    </style><script type="text/javascript">
    function insertTr()
    {
        var tableObj = document.getElementById("tab");
        var trObj = document.createElement("tr");
        //添加td1
        var tdObj1 =document.createElement("td"); //trObj.insertCell(0);是这句出了问题，在IE里insertRow和insertCell一般要一起搭配使用
        var textObj = document.createElement("input");
        textObj.setAttribute("type","text");
    textObj.setAttribute("value","2222222222");
        tdObj1.appendChild(textObj);//======================在IE6下执行这一句的时候停止了，为什么呢
        //添加td2
        var tdObj2 =document.createElement("td"); ////trObj.insertCell(1);
        var textObj1 = document.createElement("input");
        textObj1.setAttribute("type","text");
    textObj1.setAttribute("value","2222222222");
        tdObj2.appendChild(textObj1);
        trObj.appendChild(tdObj1);  
        trObj.appendChild(tdObj2);       
        tableObj.firstChild.appendChild(trObj);
    }
    </script>
    </head>
    <body>
    <table id="tab">
        <tr>
            <td style="width:50%">123</td>
            <td style="width:50%">321</td>
        </tr>
    </table>
    <input type="button" onclick="insertTr();"  value='--------------'/>
    </body>
    </html>
    另外既然是使用js做Dynamic HTML 那么本人推荐用纯DOM去做而不推荐使用IE下的文本替换（innerHTML,outterHTML之类），因为这很容易出错比如id，name可能会相同，id相同就会找不到你想要的对象，name错了提交了服务层的数据就不对，此外有很多属性是IE特有的（包括innerHTML,outterHTML），故尽量使用W3C标准的