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

Question

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

В любом случае я решил создать каждый элемент, а затем добавить его в заголовок, используя метод 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);

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

Спасибо!

Answer 1

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

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

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

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

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

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

Если вы используете script.aculo.us в своем приложении (расширение прототипа), вы можете использовать класс 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 для получения подробной информации.