為什么此javascript無法在IE中運行？

Question

我正在使用以下javascript在表中動態添加行：

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

    var tdObjEmpty = document.createElement('td');
    tdObjEmpty.setAttribute('colspan', '2');
    tdObjEmpty.innerHTML = ' '
    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規范的屬性列表列出了可以設置name屬性的元素。 表和表元素不在列表中。 最明顯的選擇之一是

• 保留對您創建的所有TR的引用，因此您不必在DOM中找到它們
• 在TR上設置className並使用選擇器找到它們

Firefox正確地使用了getElementsByName，而IE則沒有，其他人也曾遇到過。 我只是避免在這里完全使用名稱 。

Answer 2

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

getElementsByName（）在IE6-8中無法正常運行

如果您希望跨瀏覽器使用，我建議您使用其他方法來標識該元素。

Answer 3

我知道，這有點題外話，但是讓我給您一些有關在瀏覽器中使用getElementsByName功能的小建議。 它不會幫助您解決當前問題（這是因為TR不能具有Name屬性），但是它絕對可以幫助您避免將來會遇到的問題。

getElementsByName返回您的集合，該集合始終使自己與DOM樹保持最新。 這意味着，當您使用removeChild刪除一個項目時，集合的大小將減小。 因此，如果要刪除節點並繼續依賴集合的長度，則不會刪除所有節點。

檢查以下for循環示例：

• 集合長度為3，您的i var為0，i <長度
  你刪除孩子
• 集合長度為2，您的i var為1，i <長度
  你刪除孩子，
• 收集長度為1，則您的變量為2。
  條件i <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顯然好處是巨大的。