IE创建动态表格注意事项

因为工作需要,要创建可定制化页面,JS库选择mootools

最开始在Ubuntu下开发,浏览器使用FF,一切进展非常顺利,mootools库也很好用,比较顺利完成示例页面开发。可是当把页面拿到windows下IE环境执行时,噩梦开始了!!!

经过多方查找资料,朋友帮助,终于在IE下将示例页面调试成功,把其中的经验总结如下:

首先mootools库中的对象和方法是完全跨浏览器的,不存在mootools对浏览器不兼容的情况(之前还傻呼呼的认为mootools中是不是有些方法,IE中不支持啊);

IE创建动态表格注意事项:
1. IE中<tr>对象不能直接添加到<table>标签中,需要借助<tbody>标签,<table>中嵌入<tbody>,<tr>对象添加到<tbody>中,一切OK;

2. IE中对text文本输入框取值和select列表选择框取值的方式完全不一样。(人家FF可是兼容的非常好,一行$(element).value全部搞定!)
判断元素类型 $(element).type = text(文本框)|select-one(列表框)
IE取文本值   $(element).value
IE取列表值   $(element).options($(element).selectIndex).value

3. IE中动态创建出来的Button,onclick事件在构造Element时直接指定无效;至于是什么原因不知道,解决办法,先构造元素,再指定onclick事件
var button = new Element("input", {
  "id": "bt_" + id,
  "type": "button",
  "value": "remove"				
});
button.onclick = function remove() {
  var element = $("tr_" + id);
  element.dispose();
};


4. 最关键也是最难定位的BUG,IE中JS脚本里自定义变量千万不要使用 type, value 这类名称,可能跟IE识别的关键字有冲突(或者和mootools配合后识别有冲突)
var value = $(element).value; //报错,这个问题找了N久
var val = $(element).value; //把变量名value换成val,世界平静了...


附:
js脚本扩展String支持replaceAll方法
String.prototype.replaceAll = stringReplaceAll;

function stringReplaceAll(AFindText, ARepText){
  raRegExp = new RegExp(AFindText, "g");
  return this.replace(raRegExp, ARepText);
}

你可能感兴趣的:(浏览器,IE,ubuntu,脚本,mootools)