Prototype Element.update plusieurs objets

Question

Je suis en train de construire une table avec la fonction Nouvel élément de prototype. Je ressentais des problèmes dans Firefox quand je mettais la thead avec le contenu complet: tous les éléments th ainsi que le contenu. Firefox a été dépouillant les étiquettes et affiche uniquement le contenu.

Je Anyways décidé de construire chaque élément e, puis l'ajouter à la thead en utilisant la fonction Element.update(). Mais je ne l'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 bien:

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

affiche le même que ci-dessus:

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

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 puis-je ajouter plusieurs objets avec la fonction update() Prototype?

Merci!

Answer 1

Modifier

Il a juste sauté à moi que vous ajoutez « TH » éléments à un « THEAD ». C'est mauvais! Un THEAD ne doit contenir que TR de. TR peut contenir de TH de, mais si vous utilisez THEAD j'utiliserais TD à la place.

Rappelez-vous: tbody, thead et tfoot sont des subdivisions de table, et doivent contiennent des éléments tr. Vous ne devriez pas mettre des éléments td ou e directement dans ceux-ci, les résultats sont imprévisibles au mieux.

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, l'élément ne prend pas en charge l'opérateur « + » que vous utilisez, et additionne les noms des objets que vous 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 la construction des éléments. Il fournit une interface beaucoup plus intuitive, en particulier lors de la création 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);

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