Insérer des lignes dans la table

Question

Quel est le meilleur moyen en javascript simple d'insérer X rangées dans une table dans IE.

La table html ressemble à ceci:

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

Ce que je dois faire est de supprimer l’ancien corps et d’en insérer un nouveau de 1 000 lignes. J'ai mes 1000 lignes en tant que variable de chaîne javascript.

Le problème est que la table dans IE n’a pas de fonction innerHTML. J'ai vu beaucoup de bidouilles pour le faire, mais je veux voir votre meilleur.

Remarque: l'utilisation de jquery ou de tout autre framework ne compte pas.

Answer 1

Voici un excellent article du type qui a mis en œuvre le innerHTML= IE "sur comment il doit faire IE tbody.innerHTML="<tr>..." :

  

Au début, je pensais que IE n'était pas   capable d'effectuer le redessiner pour   tables modifiées avec innerHTML, mais   alors je me suis souvenu que j'étais   responsable de cette limitation!

Incidemment, le truc qu’il utilise est la façon dont tous les frameworks le font pour les éléments table / tbody.

Éditer : @mkoryak, votre commentaire me dit que vous avez zéro imagination et que vous ne méritez pas de réponse. Mais je vais vous faire plaisir quand même. Vos points:

> il n'insère pas ce dont j'ai besoin

Wha? Il insère des lignes (qu’il a sous forme de chaîne html) dans un document.createElement('div') élément.

> il utilise également un élément caché supplémentaire

Le but de cet élément était d’illustrer que tous les besoins d’IE sont un & «contexte &»; Vous pouvez utiliser un élément créé à la volée à la place (jQuery.clean()).

> et aussi l'article est vieux

Je ne vous aide plus jamais;)

Mais sérieusement, si vous voulez voir comment d’autres l’ont implémenté, jetez un œil à la source jQuery pour Element._insertionTranslations , ou le prototype <=> .

Answer 2

Faites comme jQuery, par exemple. ajoutez <table> et </table> autour de celui-ci, insérez-le dans le document et déplacez les nœuds de votre choix vers l'emplacement souhaité, puis supprimez l'élément temp.

Answer 3

le code a fini par être ceci:

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

Choses qui existaient auparavant: une table qui a un corps avec un identifiant de 'bodyId'. $ body est une variable globale (ou la fonction a une fermeture) et il y a aussi un peu de jquery, parce qu'IE n'évalue pas les scripts insérés dans le code HTML à la volée.

Answer 4

J'ai eu le même problème (comme beaucoup d'autres personnes) et après beaucoup de jeux, voici ce que j'ai à travailler.

Vous devez créer un fichier tr via document.createelement ('tr'), puis créer un fichier td de la même manière. appendchild le td au tr, appendchild le tr à tbody (pas de table) ALORS vous pouvez innerhtml le td que vous avez créé et cela fonctionnera. C'était ie8 que j'utilisais. Fondamentalement, la structure de la table doit être créée avec createelement, mais le reste peut être innerHTMLed. Je faisais ceci en regardant dans le débogueur IE8 et il dirait qu'il l'ajouterait (si je faisais tr.innerhtml = & "Blah &";) Et ne donnait aucune erreur, mais cela ne s'afficherait pas, et la vue html dom montrait une table très cassée (aucun td n’est jamais apparu, mais le / td l’a fait)

Donc quand finalement j'ai fait le TR ET td par createelement call, cela a créé un dom correct et a dessiné la page correctement.