Prototipo Element.update più oggetti

Question

Sto cercando di costruire una tabella con la funzione Nuovo elemento di Prototype. Stavo sperimentando problemi in Firefox quando mi è stato l'aggiornamento del thead con il contenuto completo: tutti esimo elementi più contenuti. Firefox è stato spogliando i tag e visualizza solo i contenuti.

In ogni modo ho deciso di costruire ogni singolo elemento ° e quindi aggiungere al thead utilizzando la funzione di Element.update(). Ma non ho trovato un modo per aggiungere più oggetti con questa funzione.

Gli elementi TH simile a questa:

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

Questo funziona bene:

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

Questo emette lo stesso come sopra:

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

Questo emette [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

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

Come posso aggiungere più oggetti con la funzione update() di Prototype?

Grazie!

Answer 1

Modifica

E 'appena saltato fuori a me che si sta aggiungendo elementi "th" ad un "THEAD". Questo non va bene! Un THEAD dovrebbe contenere solo TR di. TR del possono contenere TH di, ma se si sta utilizzando THEAD userei del TD al posto.

Ricorda: tbody, thead, e TFOOT sono suddivisioni di tavolo, e deve contengono elementi TR. Non si dovrebbe mettere td o TH elementi direttamente in questi, come i risultati sono imprevedibili al meglio.

Fine Modifica

Il problema qui è che Element.update () deve essere passata una stringa, snippet HTML, o un oggetto JavaScript che implementa toString (ad esempio Element). Tuttavia, elemento non supporta l'operatore '+', come lo si utilizza, e aggiunge insieme i nomi degli oggetti, come si vede. Si dovrebbe chiamare in modo esplicito il metodo toString su ogni bambino come tale:

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

Se si utilizza script.aculo.us nella tua app (un'estensione Prototype), è possibile utilizzare la classe Builder per aiutare a facilitare la costruzione Element. Fornisce un'interfaccia molto più intuitiva, specialmente quando si crea un gran numero di elementi. Ecco un esempio:

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 per i dettagli.