在表格中插入行

Question

將X行插入IE中的表的最佳純JavaScript方法是什么。

表格html看起來像這樣：

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

我需要做的是放下舊機身，然后插入一個新的1000行。 我有1000行作為javascript字符串變量。

問題是IE中的表沒有innerHTML函數。 我已經看到很多方法可以做到這一點，但是我想看看你最好的方法。

注意：使用jquery或任何其他框架不算在內。

Answer 1

這是實現IE的innerHTML=的家伙的一篇很棒的文章，內容涉及他如何使IE進行tbody.innerHTML="<tr>..." ：

起初，我以為IE無法使用innerHTML對修改后的表進行重繪，但后來我想起了造成這一限制的原因！

順便說一句，他使用的技巧基本上是所有框架如何對table / tbody元素進行操作。

編輯 ：@mkoryak，您的評論告訴我您的想象力為零，不應該得到答案。 但是我還是會逗你的。 您的觀點：

>他沒有插入我需要的東西

ha？ 他正在將行（作為html字符串具有的行）插入到table元素中。

>他還使用了額外的隱藏元素

該元素的目的是說明IE的所有需求都是一個“上下文”。 您可以改用動態創建的元素（ document.createElement('div') ）。

>而且這篇文章很老

我再也不會幫助您了；）

但是認真地說，如果您想看看其他人是如何實現它的，請看一下jQuery.clean()或Prototype的Element._insertionTranslations的jQuery源。

Answer 2

像jQuery那樣做，例如。 在其周圍添加<table>和</table> ，將其插入到文檔中，然后將所需的節點移動到所需的位置，並拋開臨時元素。

Answer 3

代碼最終是這樣的：

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

預先存在的東西：一個表，其主體的ID為“ bodyId”。 $ body是一個全局變量（或者該函數帶有一個閉包），其中也有一些jquery，因為IE不會評估在運行中插入html的腳本。

Answer 4

我遇到了同樣的問題（很多其他人也遇到了同樣的問題），經過很多次游戲后，我才開始工作。

您必須通過document.createelement（'tr'）進行tr，然后以相同方式進行td。 將td的tender附加到tr，將ttr的tenderchild附加到tbody（而不是表），然后您就可以對創建的td進行內部html處理，它將起作用。 這是我正在使用的ie8。 基本上，表結構必須使用createelement制成，但其余結構可以使用innerHTMLed。 我正在IE8調試器中進行監視，它會說它將添加它（如果我做了tr.innerhtml =“ blah”）並且沒有錯誤，但不會顯示，並且html dom視圖顯示非常損壞表（從未出現過td，但/ td出現過）

因此，當我最終通過createelement調用完成tr AND td時，它創建了一個外觀正確的dom並正確繪制了頁面。