Prototype Element.update 多个对象 [英] Prototype Element.update multiple objects

问题描述

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

I'm trying to construct a table with Prototype's New Element function. I was experiencing problems in Firefox when I was updating the thead with the complete content: all th elements plus contents. Firefox was stripping the tags and displays only the contents.

无论如何，我决定构造每个第 th 元素，然后使用 Element.update() 函数将其附加到 thead.但是我还没有找到用这个函数附加多个对象的方法.

Anyways I decided to construct every single th element and then append it to the thead utilizing the Element.update() function. But I haven't found a way to append multiple objects with this function.

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() 函数附加多个对象?

How can I append multiple objects with Prototype's update() function?

谢谢！

推荐答案

编辑

我突然想到您正在向THEAD"添加TH"元素.这不好！THEAD 应该只包含 TR.TR 可以包含 TH，但如果您使用的是 THEAD，我会改用 TD.

It just jumped out at me that you are adding "TH" elements to a "THEAD". This is bad! A THEAD should contain only TR's. TR's can contain TH's, but if you're using THEAD I would use TD's instead.

记住:tbody、thead 和 tfoot 是 table 的细分，并且 必须 包含 tr 元素.您不应将 td 或 th 元素直接放入其中，因为结果充其量是不可预测的.

Remember: tbody, thead, and tfoot are subdivisions of table, and must contain tr elements. You should not put td or th elements directly into these, as the results are unpredictable at best.

结束编辑

这里的问题是 Element.update() 必须传递一个字符串、HTML 片段或一个实现 toString 的 javascript 对象(例如 Element).但是，Element 不支持您使用的+"运算符，而是将对象名称加在一起，如您所见.您必须像这样显式调用每个孩子的 toString 方法:

The problem here is that Element.update() has to be passed a string, HTML snippet, or a javascript object that implements toString (e.g. Element). However, Element does not support the '+' operator as you are using it, and adds together the object names as you see. You would have to explicitly call the toString method on each child as such:

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

如果您在应用中使用 script.aculo.us(Prototype 扩展)，您可以使用 Builder 类来帮助更轻松地构建 Element.它提供了一个更直观的界面，尤其是在创建大量元素时.下面是一个例子:

If you are using script.aculo.us in your app (a Prototype extension), you can use the Builder class to assist in easier Element construction. It provides a much more intuitive interface, especially when creating large numbers of Elements. Here is an example:

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 了解详情.

这篇关于Prototype Element.update 多个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！