Question

我使用以下javascript在表格中动态添加行： -

    var trObj = document.createElement('tr');
    trObj.setAttribute('name', 'dynamicTR');

    var tdObjEmpty = document.createElement('td');
    tdObjEmpty.setAttribute('colspan', '2');
    tdObjEmpty.innerHTML = '&nbsp;'
    trObj.appendChild ( tdObjEmpty );

    var tdObj = document.createElement('td');
    tdObj.setAttribute('colspan', '15');
    tdObj.innerHTML = postingDivObj.innerHTML; // <-- copy the innerHTML
    trObj.appendChild ( tdObj );    
    parentObj = approvedDisapprovedTableObj.getElementsByTagName('tbody')[0];               
    targetElementObj = getNthTr ( parentObj, rowIndex1 - extraTr ); // <-- it will just return the trObject, 
    if ( targetElementObj ){
        parentObj.insertBefore(trObj, targetElementObj.nextSibling )
    }else{
        //alert ( 'targetElementObj is null' );
    }

这适用于FF和IE，[但是，我想，如果IE 名称并且 colspan 属性未使用setAttribute设置。但不确定]。

现在，当我必须删除动态创建的所有行时，我使用： -

dynamicTRObjs = document.getElementsByName('dynamicTR');
    if ( dynamicTRObjs ){
            parentObj = approvedDisapprovedTableObj.getElementsByTagName('tbody')[0];
            for ( i = 0 ; i < dynamicTRObjs.length; i++ ){              
                parentObj.removeChild ( dynamicTRObjs[i] );          
                extraTr++;
            } 
        }

此代码删除所有动态创建的TR。它在FF中工作正常，但在IE中却没有同样，在IE dynamicTRObjs.length始终为0的情况下，而在FF dynamicTRObjs.length中，它给出了正确的行数。请告诉我这里缺少什么。

Answer 1

HTML4规范list of attributes列出了可以设置 name 属性的元素。表和表元素不在列表中。

是最明显的选择之一

保留对您创建的所有TR的引用，这样您就不必在DOM中找到它们
在TR上设置className并使用选择器来查找它们

Firefox正确地使用了getElementsByName，IE不是其他人也遇到过的东西。我完全避免在这里使用 name 。

Answer 2

http://www.quirksmode.org/dom/w3c_core.html

getElementsByName（）在IE6-8中运行不正常

如果您想要跨浏览器可用性，我建议您使用其他方法来识别该元素。

Answer 3

我知道，这有点偏离主题，但是让我给你一个关于在浏览器中使用getElementsByName功能的小建议。它无法帮助您解决当前问题（这是因为TR不能具有Name属性），但它肯定会帮助您防止将来遇到的问题。

getElementsByName返回集合，它始终使自己与DOM树保持同步。这意味着，在您使用removeChild删除一个项目时，收集的SIZE将减少。因此，如果要删除节点并继续依赖集合的长度，则不会删除所有节点。

检查你的for循环的这个例子：

收集长度为3，你的i var为0，i＆lt;长度
你删除了孩子，
收集长度为2，你的i var为1，i <1。长度
你删除了孩子，
收集长度为1，你的i var i为2 条件i＆lt; length == true表示for循环将停止，但是某些元素仍然会在DOM中显示。

选择您想解决的任何解决方案，但请尽量避免依赖于getElementsByTagName返回的Collection的长度。

祝你好运

Answer 4

因为我并不是唯一一个建议避免使用低级DOM操作的人，所以这是一个例子：使用jquery的未经测试的实现。不完全是你的问题的答案，但评论会失去格式。

var mkTd = function (colspan, html)
{
    return $('<td />')
        .attr('colspan', colspan)
        .html(html)
    ;
}

var addRow = function (rowNr)
{
    var target = $('#approvedDisapprovedTableObj tbody tr:eq('+rowNr+')');
    if (!target.length) {
        //alert ( 'target is null' );
        return;
    }
    target.after(
        $('<tr />')
            .addClass('dynamicTR')
            .append(mkTd(2, '&nbsp;')
            .append(mkTd(15, $('#postingDivObj').html()))
    );
}
var dropRows = function ()
{
    $('.dynamicTR').remove();
}

注意表达式$('.dynamicTR').remove()与

相同

dynamicTRObjs = document.getElementsByName('dynamicTR');
if ( dynamicTRObjs ){
    parentObj = approvedDisapprovedTableObj.getElementsByTagName('tbody')[0];
    for ( i = 0 ; i < dynamicTRObjs.length; i++ ){                          
        parentObj.removeChild ( dynamicTRObjs[i] );                      
        extraTr++;
    } 
}

IMO很明显，这些好处是巨大的。

为什么这个javascript在IE中不起作用？

4 个答案: