javascript - 如何在 IE6 中添加 using Element with Prototype？使用 Prototype 1.6 的“new Element(...)”我试图创建一个 <table> 元素同时具有 <thead> 和 <tbody> 但在 IE6 中没有任何反应。 var tableProto = new Element('table').update('<thead><tr>

Question

使用 Prototype 1.6 的“new Element(...)”我试图创建一个 <table> 元素同时具有 <thead> 和 <tbody> 但在 IE6 中没有任何反应。

var tableProto = new Element('table').update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

然后我尝试像这样注入它的副本：

$$('div.question').each(function(o) {
  Element.insert(o, { after:$(tableProto.cloneNode(true)) });
});

我当前的解决方法是创建一个 <div> 而不是 <table> 元素，然后使用所有表格 HTML 来“更新”它。

如何成功地做到这一点？

Answer 1

事实证明，我在问题中提供的示例代码没有任何问题——它在 IE6 中运行得很好。我面临的问题是我还在构造函数中错误地为 <table> 元素指定了一个类，但在我的示例中省略了这一点。

“真实”代码如下，并且不正确：

var tableProto = new Element('table', { class:'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

这在 Firefox 中正常工作，但在 IE6 中失败，因为它是错误的。

通过此构造函数向元素添加属性的正确方法是提供字符串，而不仅仅是属性名称。以下代码适用于两种浏览器：

var tableProto = new Element('table', { 'class':'hide-on-screen'} ).update('<thead><tr><th>Situation Task</th><th>Action</th><th>Result</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td></tr></tbody>');

由于“类”是 JavaScript 中的保留字，因此出现错误。嗬！

对于那些不提供实际代码的人来说，这是一个教训！

Answer 2

如果原型的 .update() 方法在内部尝试设置 .innerHTML 它将在 IE 中失败。在 IE 中，表格元素的 .innerHTML 是只读的。

资源：

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html