cloneNode的问题

JS新手，想做一个动态增删Table，使用cloneNode()方法复制上一行的tr节点，但是结果是将所有的tr节点都复制了，这是为什么啊？从FireBug上面观察FF浏览器在外面都增加了的<tobdy>,但是IE6中测试也是复制了两行（IE7+没有测试 因为工作原因需要使用ie6）。另外请教下动态操作Table都是使用HTML DOM 的table对象吗？<html>
<body>
<table id = "tab1" border = 1>
<tr>
<td><input type="text" /></td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td><input type="text" /></td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</table>
<button onClick="addRow()">添加行</button> <button onClick="deleteRow()">删除行</button><script type="text/javascript"> function addRow()
{
var theTable = document.getElementById("tab1");
newrow = theTable.lastChild.cloneNode(true); //复制最后一行
theTable.appendChild(newrow);  //插入
}
function deleteRow()
{
var theTable = document.getElementById("tab1");
var totalRow = theTable.childNodes.length;
if (navigator.userAgent.indexOf("MSIE") == -1 ) //如果不是ie  总行数减1
totalColume = totalRow-1;
if (totalColume > 1 )
{
// alert(totalRowume);
theTable.removeChild(theTable.lastChild);
}
}
</script>
</html>

解决方案 »

  1.   

    alert(theTable.lastChild)输出来看看是不是你要找的元素
      

  2.   

    试试：    function addRow()
            {    
                var theTable = document.getElementById("tab1");
                newrow = theTable.lastChild.lastChild.cloneNode(true); //复制最后一行
                theTable.lastChild.appendChild(newrow);  //插入
            }
      

  3.   

    var obj = document.getElementById('tab1').getElementsByTagName('tr');
    var newrow = obj[obj.length - 1].cloneNode(true); //这样可以克隆最后一行
    theTable.appendChild(newrow);  //插入
      

  4.   

    我使用alert(theTable.lastChild.innerHTML);的结果是 <tr>
    <td><input type="text" /></td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    </tr>
    <tr>
    <td><input type="text" /></td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    </tr>
    使用alert(theTable.lastChild.lastChild.innerHTML);后返回的是undefined，FF和IE的情况都是如此，但是alert(theTable.childNodes.length);能返回出节点的数量，这是为什么？
      

  5.   

    theTable.getElementsByTagName('tr')[1].cloneNode(true);
      

  6.   

    或者：theTable.rows[theTable.rows.length-1].cloneNode(true);
      

  7.   


    IE下面应该是可以获取最后一行的，但FF下不能，因为IE会忽略节点间的空白文本节点（换行符），FF不会忽略。
      

  8.   

    注意生成了的元素DOM结构，并非你想象的那样<table>
    <tbody> //!!!!!
    <tr>
    ...
      

  9.   

    问题又来了，使用5L 6L的方法在FF下可行，IE6下不可行啊， 用alert(theTable.childNodes.length)测试发现节点确实插入进去了，IE下还需要insertCell()方法？
    <tbody>的这个问题我也考虑到了，所以才有上面的alert(theTable.lastChild.innerHTML);和alert(theTable.lastChild.lastChild.innerHTML);的测试。