Zeilen in Tabelle einfügen

Question

Was ist die beste plain Javascript-Methode zum Einfügen von X-Zeilen in eine Tabelle in IE.

Die Tabelle html wie folgt aussieht:

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

Was ich tun muss, ist die alte Körper fallen, und legen Sie eine neue mit 1000 Zeilen. Ich habe meine 1000 Zeilen als Javascript-String-Variable.

Das Problem ist, dass Tabelle in IE keine innerHTML-Funktion hat. Ich habe viele Hacks gesehen, aber ich möchte dein Bestes sehen.

Hinweis: Die Verwendung von jquery oder einem anderen Framework zählt nicht.

Answer 1

Hier ist ein großer Artikel vom Typ, die innerHTML= des implementiert IE auf how he got IE to do tbody.innerHTML="<tr>...":

Zuerst dachte ich, dass IE die neu zeichnen die Durchführung für modifizierten Tabellen mit innerHTML-, aber dann nicht fähig war ich erinnerte mich, dass ich für diese Einschränkung verantwortlich war !

übrigens der Trick, den er verwendet, ist im Grunde wie alle Frameworks es tun table/tbody Elemente für.

Bearbeiten: @mkoryak, Ihr Kommentar sagt mir, Sie haben keine Phantasie und keine Antwort verdienen. Aber ich werde dich trotzdem witzig machen. Ihre Punkte:

> er nicht einfügt, was ich brauche

Wha? Er fügt Zeilen (die er als HTML-String hat) in ein table Element ein.

> er verwendet auch ein extra versteckte Element

Der Punkt dieses Elements zu verdeutlichen war, dass alle IE braucht, ist ein „Kontext“. Sie können stattdessen ein Element verwenden, das im laufenden Betrieb erstellt wurde (document.createElement('div')).

> und auch der Gegenstand alt

ich dich nie wieder zu helfen;)

Aber im Ernst, wenn Sie sehen wollen, wie andere es umgesetzt haben, werfen Sie einen Blick auf die jQuery Quelle für jQuery.clean() oder Prototype Element._insertionTranslations.

Answer 2

Wie jQuery tut es, z. Fügen Sie <table> und </table> hinzu, fügen Sie sie in das Dokument ein und verschieben Sie die gewünschten Knoten dorthin, wo Sie sie haben möchten, und entfernen Sie das Temp-Element.

Answer 3

der Code am Ende dieses sein:

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); 
    } 

Dinge, die vorher existiert beed auf: eine Tabelle, die einen Körper mit id ‚bodyId‘ hat. $ body ist eine globale Variable (oder die Funktion hat eine Schließung), und da ist auch ein bisschen jquery drin, weil der IE keine Skripte evaluiert, die direkt in den HTML-Code eingefügt werden.

Answer 4

Ich hatte das gleiche Problem (wie viele andere Leute) und nach viel herumspielen ist hier, was ich arbeiten musste.

Sie müssen einen tr über document.createelement ('tr') machen dann machen Sie eine td, auf die gleiche Weise. appendchild die td an die tr, appendchild die tr an tbody (nicht Tabelle) DANN können Sie innerhtml die td Sie erstellt und es wird funktionieren. Das war ie8, das ich benutzte. Grundsätzlich muss die Tabellenstruktur mit createelement erstellt werden, aber der Rest kann innerHTMLed sein. Ich habe dies im IE8 Debugger beobachtet und es würde sagen, es würde es hinzufügen (wenn ich tr.innerhtml = "blah") und keinen Fehler geben, aber es würde nicht angezeigt, und die HTML-Dom-Ansicht zeigte eine sehr kaputte Tabelle (kein TD jemals angezeigt, aber die/td tat)

Also, wenn ich endlich die tr UND td von createelement Aufrufe, es erstellt eine korrekt aussehende Dom und zeichnete die Seite richtig.