Prototype Element.update несколько объектов

Question

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

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

-м элементы выглядят следующим образом:

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». Это плохо! THEADAD должен содержать только TR. TR может содержать TH, но если вы используете THEAD, я бы вместо этого использовал TD.

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

End Edit

Проблема здесь состоит в том, что Element.update() должна быть передана строка, HTML фрагмент, или яваскрипта объект, который реализует ToString (например, элемент). Тем не менее, элемент не поддерживает оператор «+», когда вы его используете, и добавляет вместе имена объектов, как вы видите. Вы должны явно вызвать метод 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 для деталей.