mootools:new Element() - 在IE中不起作用

时间:2011-02-15 16:11:09

标签: javascript html mootools

我正在尝试创建一堆元素并将它们插入表中。在FF和Chrome中,我的代码工作正常,但在IE中,当我按下“插入行”按钮时没有任何反应。没有错误或任何事情:\

我已经将我的代码简化为一个简单的例子,试图找出我做错了什么。

function insert_row(){
    //get table element
    var filterTable = $('table_search_filter');

    //create new objects
    var tr = new Element('tr');
    var td1 = new Element('td');
    var td2 = new Element('td');        
    var td3 = new Element('td');
    var select_project = new Element('select', {'id':'select_secondary_' + filterCounter});


    //add elements to table
    td2.grab(select_project);
    tr.grab(td1);   
    tr.grab(td2);   
    tr.grab(td3); 
    filterTable.grab(tr);
}

当我写出我的tr元素innerHTML时,我在FF和IE中获得了不同的结果:

FF - <td></td><td><select id="select_secondary_0"></select></td><td></td>

IE - <TD></TD><TD><SELECT id=select_secondary_0></SELECT></TD><TD></TD>

所以看起来IE处理它的方式不同。首先,标签是大写的,这是不好的。其次,我的身份没有'人物。为什么?我现在真的很困惑,漫长的一天:\

3 个答案:

答案 0 :(得分:5)

我回想一下,如果您的表中没有tbody / thead元素,某些版本的IE将无法动态创建表格元素。

答案 1 :(得分:4)

这可能是mootools中的一个错误。在玩完它后,我能够生成一个可以工作的脚本 - 注意我只是在表中添加了一个tbody标签,并将id属性放在那个而不是表上。代码现在按预期工作。这不是一个“答案”本身,但它可能是一个可行的解决方案。

JSFiddle:http://jsfiddle.net/Brvyn/

<script type="text/javascript">
function insertRow() {
    //get table element
    var filterTable = $('table_search_filter');

    //create new objects
    var tr = new Element('tr');
    var td1 = new Element('td');
    td1.innerHTML = "first column";
    var td2 = new Element('td');      
    var td3 = new Element('td');
    td3.innerHTML = "third column";
    var select_project = new Element('select', {'id':'select_secondary'});


    //add elements to table
    select_project.inject(td2);
    td1.inject(tr);   
    td2.inject(tr);   
    td3.inject(tr); 
    tr.inject(filterTable);
    return false;

}
</script>

<a href="#" onclick="return insertRow();">Fire</a>

<br /> Table:

<table>
    <tbody id="table_search_filter"></tbody>    
</table>

答案 2 :(得分:2)

在相关的说明中,我们刚刚调试了一个使用Mootools v1.1的脚本(不要问) - IE9似乎有问题是以下语法:

var select_project = new Element('select', {'id':'select_secondary'});

但重写如此:

var select_project = new Element('select');
select_project.setAttribute('id', 'select_secondary');

......它运作良好。不知道为什么会这样 - 但我认为这种观察可能对某人有用。

P.S。我猜这个bug可能已经在Mootools的更高版本中得到修复。