Прототип Element.update нескольких объектов
-
12-09-2019 - |
Вопрос
Я пытаюсь построить таблицу с помощью функции нового элемента 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()
функция?
Спасибо!
Решение
Редактировать
Мне просто бросилось в глаза, что вы добавляете элементы «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 для получения подробной информации.