Einfügen von Zeilen in der Tabelle
-
03-07-2019 - |
Frage
Was ist die beste Ebene Javascript Weg X Zeilen in eine Tabelle in IE einzufügen.
Die Tabelle html sieht wie folgt aus:
<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, es zu tun, aber ich möchte Ihre beste sehen.
Hinweis: mit Jquery oder andere Rahmen nicht zählen.
Lösung
Hier ist ein großer Artikel vom Typ, der IE innerHTML=
auf , wie er bekam IE tbody.innerHTML="<tr>..."
zu tun:
Zuerst dachte ich, dass der IE nicht Lage, die Neuzeichnen des Ausführens für modifizierten Tabellen mit innerHTML-, aber dann erinnerte ich mich, dass ich verantwortlich für diese Einschränkung!
Übrigens der Trick, den er verwendet, ist im Grunde wie alle Frameworks es tun für table
/ tbody
Elemente.
Bearbeiten : @mkoryak, Ihr Kommentar sagt mir, du Null Phantasie haben und verdienen keine Antwort. Aber ich werde Humor Sie sowieso. Ihre Punkte:
> er ist nicht einfügen, was ich brauche
Wha? Er Einfügen von Zeilen (das er als HTML-String hat) in ein table
Element.
> er verwendet auch ein zusätzliches verstecktes Element
Der Punkt dieses Element war zu zeigen, dass alle IE brauchen, ist ein „Kontext“. Sie könnten ein Element on the fly erstellt anstatt (document.createElement('div')
).
> und auch der Artikel alt
Ich helfe Ihnen nie wieder;)
Aber im Ernst, wenn Sie sehen wollen, wie andere es umgesetzt haben, werfen Sie einen Blick auf die jQuery Quelle jQuery.clean()
oder Prototype Element._insertionTranslations
.
Andere Tipps
Machen Sie es wie jQuery es tut, zum Beispiel. hinzufügen <table>
und </table>
um ihn herum, legen Sie in das Dokument und verschieben Sie die Knoten, die Sie wollen, wo Sie wollen, und die temp-Element Graben.
Sie den 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 einen Verschluss darauf), und es ist ein bisschen von jquery dort auch, weil IE nicht Skripte evalute, die in den HTML-Code on the fly eingefügt werden.
Ich hatte das gleiche Problem (wie viele andere Menschen tun) und nach viel zu spielen ist hier, was ich zu arbeiten habe.
Sie haben einen tr über document.createElement machen ( ‚tr‘) dann eine td machen, auf die gleiche Weise. appendChild die td zum tr, appendChild die tr tbody (nicht Tabelle), dann können Sie die td innerHTML- Sie erstellt und es wird funktionieren. Das war IE8 war ich mit. Grundsätzlich ist die Tabellenstruktur hat gemacht werden mit createelement aber der Rest kann innerHTMLed werden. Ich tat dies im IE8 Debugger beobachten und es würde sagen, es wäre es aus (wenn ich tr.innerhtml tue = „blah“) und keine Fehler geben, aber es wäre nicht angezeigt, und die html dom Ansicht zeigte eine sehr gebrochen Tabelle (kein td zeigte immer, aber der / td tat)
Als schließlich habe ich die Tr und td durch create Anrufe, erstellt es einen richtigen Suche dom und zog die Seite korrekt.