原型Element.update多个对象

Question

我正在尝试使用Prototype的New Element函数构建一个表。当我用完整的内容更新thead时，我在Firefox中遇到了问题：所有元素和内容。 Firefox正在剥离标签并仅显示内容。

无论如何，我决定构造每一个元素，然后使用Element.update()函数将其附加到thead。但我还没有找到一种方法来附加具有此功能的多个对象。

这些元素看起来像这样：

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

修改

刚刚向我跳出你正在向“THEAD”添加“TH”元素。这是不好的！ THEAD应仅包含TR。 TR可以包含TH，但是如果你使用THEAD，我会使用TD代替。

请记住：tbody，thead和tfoot是表的细分，必须包含tr元素。你不应该将td或th元素直接放入这些元素中，因为结果最多是不可预测的。

结束修改

这里的问题是Element.update（）必须传递一个字符串，HTML片段或实现toString的javascript对象（例如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（原型扩展），则可以使用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了解详情。