Insérer des lignes dans le tableau

Quelle est la meilleure manière javascript simple d'insérer des lignes X 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, c'est abandonner l'ancien corps, et insérer un nouveau avec 1000 lignes. J'ai mes 1000 lignes comme variable de chaîne de javascript.

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

Remarque: l'utilisation de jquery ou d'un autre cadre ne compte pas.

Voici un excellent article du type qui a implémenté IE's innerHTML= sur comment il a eu IE pour faire tbody.innerHTML="<tr>..." :

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

Incidemment, l'astuce qu'il utilise est essentiellement la façon dont tous les cadres le font pour les éléments de table / tbody .

Edit : @mkoryak, votre commentaire me dit que vous n'avez aucune imagination et ne méritez pas une réponse. Mais je vous irons de toute façon. Vos points:

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

Wha? Il insère des lignes (qu'il a en tant que chaîne html) dans un élément de table .

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

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 ( document.createElement('div') ).

> Et aussi l'article est ancien

Je ne vous aide plus jamais;)

Mais sérieusement, si vous voulez voir comment les autres l'ont implémenté, regardez la source jQuery pour jQuery.clean() , ou Prototype's Element._insertionTranslations .

Faites comme jQuery le fait, par ex. Ajoutez <table> et </table> autour de lui, insérez dans le document et déplacez les nœuds que vous voulez où vous les souhaitez et abandonnez l'élément temporel.

Le code a fini par être le suivant:

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

Ce qu'il fallait exister à l'avance: une table qui a un corps avec id de 'bodyId'. $ Body est une variable globale (ou la fonction a une fermeture sur elle), et il y a un peu de jquery là-dedans, car IE n'évalue pas les scripts qui sont insérés dans le html à la volée.

J'ai eu le même problème (comme beaucoup d'autres personnes) et après avoir joué beaucoup de choses ici, c'est ce que j'ai travaillé.

Vous devez effectuer un tr via document.createelement ('tr') puis faire un td, de la même manière. Appendchild the td to the tr, appendchild the tr to tbody (not table) PUIS vous pouvez innerhtml le td que vous avez créé et cela fonctionnera. C'était ie8 que j'avais utilisé. Fondamentalement, la structure de la table doit être faite avec createelement, mais le reste peut être innerHTMLed. Je faisais cela en regardant dans le débogueur IE8 et je dirais qu'il l'ajouterait (si je l'ai fait tr.innerhtml = "blah") et je n'ai pas d'erreur, mais il ne s'afficherait pas, et la vue html dom a montré un très cassé Table (aucun Td jamais monté, mais le / td a fait)

Donc, quand finalement j'ai fait le tr AND td par createelement appels, il a créé un dom miroir et a dessiné correctement la page.