Prototype Element.update plusieurs objets

Question

J'essaye de construire une table avec la fonction New Element de Prototype. J'avais des problèmes avec Firefox quand je mettais à jour le contenu avec le contenu complet: tous les éléments et le contenu. Firefox dépouillait les tags et affiche uniquement le contenu.

Quoi qu'il en soit, j'ai décidé de construire chaque élément th et ensuite l'ajouter à la thead en utilisant la fonction Element.update(). Mais je n'ai pas trouvé un moyen d'ajouter plusieurs objets avec cette fonction.

Les éléments th ressemblent à ceci:

var thead_amount = new Element('th', { 
    'id': 'amount' 
}).update('amount'); 

Cela fonctionne très bien:

new Element('thead').update(thead_amount); 

Ce sorties comme ci-dessus:

new Element('thead').update(thead_amount, thead_pdf, thead_tags, thead_date, thead_options); 

Ce sorties [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

new Element('thead').update(thead_amount + thead_pdf + thead_tags + thead_date + thead_options); 

Comment ajouter plusieurs objets avec la fonction update() de Prototype?

Merci!

Answer 1

Modifier

Il a juste sauté sur moi que vous ajoutez "TH" éléments à un "THEAD". C'est mauvais! Un THEAD ne devrait contenir que des TR. Les TR peuvent contenir des TH, mais si vous utilisez THEAD, j'utiliserais des TD à la place. Rappelez-vous: tbody, thead et tfoot sont des subdivisions de table, et doit contenir contenir des éléments tr. Vous ne devriez pas mettre les éléments td ou th directement dans ceux-ci, car les résultats sont au mieux imprévisibles.

Fin Modifier

Le problème ici est que Element.update() doit être passé une chaîne, code HTML ou un objet javascript qui implémente toString (par exemple Element). Toutefois, Element ne prend pas en charge l'opérateur '+' lorsque vous l'utilisez et ajoute les noms d'objet comme vous le voyez. Vous devez appeler explicitement la méthode toString de chaque enfant en tant que tel:

new Element('thead').update(thead_amount.toString() 
    + thead_pdf.toString() 
    + thead_tags.toString() 
    + thead_date.toString() 
    + thead_options.toString()); 

Si vous utilisez script.aculo.us dans votre application (une extension de prototype), vous pouvez utiliser la classe Builder pour aider à faciliter Construction d'élément Il fournit une interface beaucoup plus intuitive, en particulier lors de la création d'un grand nombre d'éléments. Voici un exemple:

var table = Builder.node('table', { 
    width: '100%', 
    cellpadding: '2', 
    cellspacing: '0', 
    border: '0' 
}); 

var tbody = Builder.node('tbody'), 
    tr = Builder.node('tr', { className: 'header' }), 
    td = Builder.node('td', [Builder.node('strong', 'Category')]); 

tr.appendChild(td); 
tbody.appendChild(tr); 
table.appendChild(tbody); 

$('divCat').appendChild(table); 

Découvrez http://wiki.github.com/madrobby/scriptaculous/builder pour plus de détails.