Prototipo Element.update varios objetos

Question

Estoy tratando de construir una tabla con la función del nuevo elemento de Prototipo. Que estaba experimentando problemas en Firefox cuando estaba Actualización de la culata en T con el contenido completo: todos los elementos º más contenido. Firefox fue desnudando las etiquetas y muestra sólo el contenido.

De todas formas decidí construir cada elemento º sola y luego añadirlo al thead la utilización de la función Element.update(). Pero no he encontrado una forma de añadir varios objetos con esta función.

Los elementos th aspecto:

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

Esto funciona bien:

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

Esto da salida a la misma que la anterior:

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

Esto da salida a [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

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

¿Cómo puedo añadir varios objetos con la función de update() Prototipo?

Gracias!

Answer 1

Editar

Simplemente me llamó la atención que está agregando elementos "TH" a un "THEAD". ¡Esto es malo! Un THEAD debe contener solamente TR. TR de TH pueden contener de, pero si usted está utilizando THEAD me gustaría utilizar en lugar de TD.

Recuerde: tbody, culata en T, y tfoot son subdivisiones de mesa, y debe contienen elementos TR. Usted no debe poner los elementos td o th directamente en ellos, ya que los resultados son impredecibles en el mejor.

Fin Editar

El problema aquí es que Element.update () tiene que pasar una cadena, fragmento de HTML o Javascript a un objeto que implementa toString (por ejemplo Element). Sin embargo, El elemento no admite el operador '+' como usted lo está utilizando, y suma los nombres de objeto que se ve. Tendría que llamar explícitamente al método toString de cada niño como tal:

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

Si está utilizando script.aculo.us en su aplicación (una extensión del prototipo), puede utilizar la clase Builder para ayudar en la construcción de elementos más fácil. Proporciona una interfaz mucho más intuitiva, especialmente cuando la creación de un gran número de elementos. He aquí un ejemplo:

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

http://wiki.github.com/madrobby/scriptaculous/builder para más detalles.