Protótipo elemento.Update vários objetos

Question

Estou tentando construir uma tabela com a nova função de elemento do protótipo. Eu estava enfrentando problemas no Firefox quando estava atualizando o THEAD com o conteúdo completo: todos os elementos mais conteúdo. O Firefox estava tirando as tags e exibe apenas o conteúdo.

De qualquer forma, decidi construir todos Element.update() função. Mas não encontrei uma maneira de anexar vários objetos com essa função.

Os elementos da TH são assim:

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

Isso funciona bem:

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

Isso produz o mesmo que acima:

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

Isso sai [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

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

Como posso anexar vários objetos com protótipo update() função?

Obrigado!

Answer 1

Editar

Apenas saltou para mim que você está adicionando elementos "Th" a um "Thead". Isto é mau! Um Thead deve conter apenas TR's. Os TRs podem conter os THs, mas se você estiver usando o THE, eu usaria os TDs.

Lembre -se: TBody, Thead e Tfoot são subdivisões da tabela e devo conter elementos TR. Você não deve colocar elementos TD ou TH diretamente neles, pois os resultados são imprevisíveis na melhor das hipóteses.

ENDO ENDIT

O problema aqui é que o elemento.Update () deve ser passado uma string, snippet html ou um objeto JavaScript que implementa a tostragem (por exemplo, elemento). No entanto, o elemento não suporta o operador '+' como você o está usando e adiciona os nomes de objetos como você vê. Você teria que chamar explicitamente o método de tostragem em cada criança como tal:

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

Se você estiver usando o script.aculo.us em seu aplicativo (uma extensão de protótipo), poderá usar a classe Builder para ajudar na construção de elementos mais fácil. Ele fornece uma interface muito mais intuitiva, especialmente ao criar um grande número de elementos. Aqui está um exemplo:

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

Verificação de saída http://wiki.github.com/madrobby/scriptaculous/builder para detalhes.