如何在IE6中添加带有原型的使用元素?

时间:2020-03-06 14:41:54  来源:igfitidea点击:

我试图使用原型1.6的" new Element(...)"来创建一个同时包含<thead>和<tbody>的<table>元素,但是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对其进行"更新"。

如何成功做到这一点?

解决方案

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

来源:

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

事实证明,我在问题中提供的示例代码没有任何问题-它可以在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中的保留字,因此出现错误。 h!

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