Comment ajouter un <table> en utilisant Element avec Prototype dans IE6?

Question

L'utilisation de « nouvel élément (...) » Prototype 1.6 Je suis en train de créer un tableau < élément > à la fois un <thead> et <tbody>, mais rien ne se passe dans IE6.

var tableProto = new Element('table').update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>'); 

Je suis alors essaie d'injecter des copies comme ceci:

$$('div.question').each(function(o) { 
    Element.insert(o, { after:$(tableProto.cloneNode(true)) }); 
}); 

Ma solution actuelle est de créer un <div> au lieu d'un élément de table < >, puis « mise à jour » avec toute la table HTML.

Comment réussit-on cela?

Answer 1

Comme il se trouve, il n'y a rien de mal avec le code exemple je fournis dans la question - cela fonctionne dans IE6 très bien. Le problème auquel je faisais face est que je spécifiais également une classe pour l'élément <table> dans le constructeur de façon incorrecte, mais omis cela de mon exemple.

Le code "réel" est le suivant, et est incorrect:

var tableProto = new Element('table', { class:'hide-on-screen'}).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>'); 

Cela fonctionne correctement dans Firefox, mais échoue dans IE6 parce qu'il est mal .

La façon correcte d'ajouter des attributs à un élément via ce constructeur est de fournir des chaînes, pas seulement des noms d'attribut. Le code suivant fonctionne dans les deux navigateurs:

var tableProto = new Element('table', { 'class':'hide-on-screen'}).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>'); 

Une erreur est survenue car "class" est un mot réservé en JavaScript. Doh!

Laissez ceci être une leçon à ceux qui ne fournissent pas leur le vrai code!

Answer 2

Si la méthode .update() des prototypes essaie en interne de définir le fichier .innerHTML, elle échouera dans IE. Dans IE, le .innerHTML d'un élément de table est en lecture seule.

Source:

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html