[英]mootools: new Element() - won't work in IE
I'm trying to create a bunch of elements and inserting them into a table. 我正在尝试创建一堆元素并将其插入表中。 In FF and Chrome my code works fine, but in IE nothing happens when i push the "insert row" button.
在FF和Chrome中,我的代码工作正常,但是在IE中,当我按“插入行”按钮时什么也没发生。 No errors or anything :\\
没有错误或其他任何内容:\\
I've stripped down my code to a simple example to try to find what I'm doing wrong. 我已将代码简化为一个简单的示例,以尝试查找我在做什么错。
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);
}
When i write out my tr elements innerHTML i get different results in FF and IE: 当我写出tr元素innerHTML时,在FF和IE中会得到不同的结果:
FF - <td></td><td><select id="select_secondary_0"></select></td><td></td>
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-
<TD></TD><TD><SELECT id=select_secondary_0></SELECT></TD><TD></TD>
So it looks like IE handles it differently. 因此,看起来IE处理方式有所不同。 First off, the tags are in upper case which is not good.
首先,标签是大写的,这不好。 Secondly, my id is without ' characters.
其次,我的身份证没有'字符。 Why?
为什么? I'm really confused now, long day :\\
漫长的一天,我现在真的很困惑:\\
我记得有一个版本的IE,如果您的表中没有tbody / thead元素,则不会动态创建表元素。
This may be a bug in mootools. 这可能是mootools中的错误。 After playing around with it, I was able to produce a script that DOES work - note I simply added a tbody tag to the table, and placed the id property on that instead of the table.
在使用它之后,我能够生成一个可以正常工作的脚本-注意,我只是在表中添加了一个tbody标记,并将id属性放置在该表而不是表上。 The code now works as expected.
该代码现在可以按预期工作。 This isn't an "answer" per-se, but it might be a viable work-around for you.
这本身不是“答案”,但对您来说可能是可行的解决方法。
JSFiddle: http://jsfiddle.net/Brvyn/ 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>
On a related note, we just debugged a script that uses Mootools v1.1 (don't ask) - and IE9 seemed to have issues was the following syntax: 在相关说明中,我们刚刚调试了使用Mootools v1.1的脚本(不要问)-IE9似乎存在以下语法问题:
var select_project = new Element('select', {'id':'select_secondary'});
But re-written like so: 但是这样重写:
var select_project = new Element('select');
select_project.setAttribute('id', 'select_secondary');
...it worked fine. ...效果很好。 No idea why that is - but I thought this observation may be useful to someone.
不知道为什么会这样-但我认为这种观察对某人可能有用。
PS I'm guessing this bug may have been fixed in a later version of Mootools. PS我猜这个错误可能已在更高版本的Mootools中修复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.