Inserisci le righe nella tabella

Question

Qual è il modo javascript migliore per inserire X righe in una tabella in IE.

La tabella html è simile alla seguente:

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

Quello che devo fare è rilasciare il vecchio corpo e inserirne uno nuovo con 1000 righe. Ho le mie 1000 righe come variabile stringa javascript.

Il problema è che la tabella in IE non ha alcuna funzione innerHTML. Ho visto molti hack per farlo, ma voglio vedere il tuo migliore.

Nota: l'utilizzo di jquery o di qualsiasi altro framework non conta.

Answer 1

Ecco un ottimo articolo del ragazzo che ha implementato IE innerHTML= su come ha avuto IE per fare tbody.innerHTML="<tr>..." :

  

Inizialmente, pensavo che IE non lo fosse   in grado di eseguire il redraw per   tabelle modificate con innerHTML, ma   poi mi sono ricordato che lo ero   responsabile di questa limitazione!

Per inciso, il trucco che usa è fondamentalmente come lo fanno tutti i framework per gli elementi table / tbody.

Modifica : @mkoryak, il tuo commento mi dice che hai zero immaginazione e non meriti una risposta. Ma ti umorizzerò comunque. I tuoi punti:

gt &; non sta inserendo ciò di cui ho bisogno

Wha? Sta inserendo righe (che ha come stringa html) in un document.createElement('div') elemento.

gt &; usa anche un ulteriore elemento nascosto

Il punto di quell'elemento era di illustrare che tutto ciò di cui IE ha bisogno è un " contesto " ;. È possibile utilizzare un elemento creato al volo (jQuery.clean()).

gt &; e anche l'articolo è vecchio

Non ti aiuterò mai più;)

Ma seriamente, se vuoi vedere come gli altri lo hanno implementato, dai un'occhiata alla fonte jQuery per Element._insertionTranslations o Prototype's <=> .

Answer 2

Fai come jQuery, ad es. aggiungi <table> e </table> attorno ad esso, inserisci nel documento e sposta i nodi che vuoi dove vuoi e lascia l'elemento temp.

Answer 3

il codice ha finito per essere questo:

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

Cose che dovevano esistere prima: una tabella che ha un corpo con ID di 'bodyId'. $ body è una variabile globale (o la funzione ha una chiusura) e c'è anche un po 'di jquery, perché IE non valuta gli script che sono inseriti nell'html al volo.

Answer 4

Ho avuto lo stesso problema (come fanno molte altre persone) e dopo aver giocato un sacco di volte ecco cosa ho avuto modo di lavorare.

Devi fare un tr tramite document.createelement ('tr') quindi fare un td, allo stesso modo. appendchild il td al tr, appendchild il tr al tbody (non tabella) ALLORA puoi inserire il td che hai creato e funzionerà. Questo era ie8 che stavo usando. Fondamentalmente la struttura della tabella deve essere creata con createelement, ma il resto può essere innerHTMLed. Lo stavo facendo guardando nel debugger di IE8 e diceva che lo avrebbe aggiunto (se avessi fatto tr.innerhtml = & Quot; blah & Quot;) e non avessi dato alcun errore, ma non sarebbe stato visualizzato, e la vista dom html mostrava una tabella molto rotta (nessuna td è mai stata mostrata, ma la / td l'ha fatto)

Quindi, quando finalmente ho fatto il tr AND td dalle chiamate createelement, ha creato un dom dall'aspetto corretto e disegnato la pagina correttamente.