Прототип Element.update нескольких объектов

Question

Я пытаюсь построить таблицу с помощью функции New Element в Prototype.У меня возникли проблемы в Firefox, когда я обновлял thead полным содержимым: все элементы th плюс содержимое.Firefox разбирал теги и отображал только содержимое.

В любом случае я решил создать каждый отдельный элемент и затем добавить его в thead, используя функцию Element.update().Но я не нашел способа добавить несколько объектов с помощью этой функции.

Элементы th выглядят так:

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

Это прекрасно работает:

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

Это выводит то же, что и выше:

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

Это выводит [object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement]

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

Как добавить несколько объектов с помощью функции update() в Prototype?

Спасибо!

Answer 1

Редактировать

Мне просто показалось, что вы добавляете элементы "TH" в "THEAD". Это плохо! THEAD должен содержать только TR. TR могут содержать TH, но если вы используете THEAD, я бы использовал TD вместо этого.

Помните: tbody, thead и tfoot являются подразделами таблицы, а должен содержать элементы tr. Вы не должны помещать элементы td или th непосредственно в них, поскольку результаты в лучшем случае непредсказуемы.

Конец редактирования

Проблема здесь в том, что Element.update () необходимо передать строку, фрагмент HTML или объект javascript, который реализует toString (например, Element). Однако Element не поддерживает оператор «+», поскольку вы его используете, и складывает имена объектов, как вы видите. Вы должны явно вызывать метод toString для каждого дочернего элемента следующим образом:

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

Если вы используете script.aculo.us в своем приложении (расширение Prototype), вы можете использовать класс Builder, чтобы упростить конструирование элемента. Он обеспечивает гораздо более интуитивный интерфейс, особенно при создании большого количества элементов. Вот пример:

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 для деталей.