`
lj6684
  • 浏览: 967155 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

IE创建动态表格注意事项

    博客分类:
  • Web
阅读更多
因为工作需要,要创建可定制化页面,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);
}
  • demo.rar (21.3 KB)
  • 描述: 示例页面
  • 下载次数: 5
分享到:
评论

相关推荐

    javascript动态创建表格

    JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...

    table动态添加行并编辑

    实现技巧与注意事项 - 使用`innerHTML`或`textContent`来设置和获取单元格内容。 - 考虑性能,避免不必要的DOM操作,尤其是大量数据时,可使用虚拟DOM或数据绑定框架(如Vue、React)。 - 保持数据模型与视图同步...

    jquery实现的超帅动态表格交叉变色高亮显示效果.zip

    “使用须知.txt”文件则可能包含了关于如何运行示例、注意事项以及可能的兼容性问题等内容。在实际应用中,确保代码在各种浏览器和设备上的兼容性是非常重要的,因为不同的浏览器对CSS和JavaScript的支持程度可能...

    js word表格动态添加代码

    ### 注意事项 - 由于文档内容是通过OCR扫描得到的,可能会存在识别错误或遗漏,这需要读者自行判断和修正。 - 在实际应用中,由于安全和兼容性问题,使用ActiveX控件的方法可能不被推荐,而应当使用其他技术,如...

    网页设计注意事项.docx

    以上这些技巧和注意事项是网页设计的基础,理解和掌握它们能够帮助创建更专业、更符合用户需求的网页。在实际设计时,还要考虑响应式设计、色彩搭配、交互性等多个方面,以提供最佳的用户体验。

    javascript动态向网页中添加表格实现代码.docx

    #### 五、注意事项 - 本示例在IE9、Firefox、Chrome和Safari等浏览器中进行了测试,表现良好。 - 在实际应用中可能还需要考虑更多的兼容性问题,例如对于老旧版本的浏览器的支持。 - 另外,还可以进一步优化代码,如...

    zDialog 弹出IE

    2. **自定义内容**:用户可以将HTML、CSS和JavaScript代码嵌入到zDialog中,创建个性化的弹出窗口,显示各种类型的信息,如文本、图片、表格甚至复杂的动态内容。 3. **交互性**:zDialog可能支持交互操作,如点击...

    js调用ie打印和预览功能

    #### 四、注意事项 1. **兼容性问题**:这种方法仅适用于IE浏览器,并且需要确保用户的IE版本支持ActiveX控件。 2. **安全设置**:部分用户可能会禁用ActiveX控件,或者浏览器的安全设置可能不允许运行某些控件。...

    js导出Excel和Word,不支持ie

    4. **实际应用中的注意事项** - 数据安全:在前端生成和下载文件时,应确保数据的安全性,避免敏感信息泄露。 - 性能优化:大量数据导出可能导致页面卡顿,因此可能需要考虑分批导出或服务端处理。 - 文件大小:...

    js操作html表格, 增加,删除

    **实际应用中的注意事项** 1. **兼容性**:确保你的代码对不同的浏览器有良好的兼容性,特别是对于较旧版本的IE浏览器。 2. **错误处理**:当用户尝试删除不存在的行或未定义的元素时,应有适当的错误处理机制。 3. ...

    JS:表格排序

    描述中提到的“博文链接:https://liuzidong.iteye.com/blog/974076”提供了更详细的资源,虽然这里没有具体内容,但通常博主会详细介绍如何使用JavaScript实现表格排序,可能包括步骤、示例代码和注意事项。...

    调用IE内置打印组件完成web打印方案及例程

    #### 五、注意事项 - **兼容性问题**:此方案仅适用于IE浏览器,对于其他现代浏览器(如Chrome、Firefox等),需要采用不同的技术方案。 - **安全性限制**:由于安全策略的限制,某些情况下可能无法在Web页面中直接...

    开发跨浏览器javascript常见注意事项

    以下是一些常见的注意事项,有助于优化JavaScript在不同浏览器之间的兼容性。 一、向表追加行 在JavaScript中向HTML表格添加行时,通常会使用`document.createElement`和`document.appendChild`方法。然而,IE浏览...

    jquery-easyui-1.4.5-解决了IE6/IE7下无法正常运行的问题

    - `readme.txt`:提供了一些基本的使用指南和注意事项。 - `plugins`:包含扩展插件,如日期选择器、拖放功能等。 - `locale`:存放各种语言包,支持国际化。 - `src`:源代码目录,对于开发者来说,可以查看和...

    在网页中编辑office word excel文件_效果跟office word一模一样.但是只支持IE浏览器.zip

    2. "pageoffice 开发笔记.txt":这可能是一个开发人员记录的文档,详细介绍了使用PageOffice控件进行开发的过程、技巧和注意事项。 3. "PageOffice办公神器支持doc、docx、xls、xlsx、ppt、pptx、pdf、zdf、visio等...

    IE9关联数组导致内存泄漏测试报告

    5. **兼容性考虑**:讨论其他浏览器是否也有类似问题,以及开发者在跨浏览器开发时应注意的事项。 标签“源码”和“工具”暗示报告可能包含了可复现问题的源代码示例,以及可能用于检测内存泄漏的工具。在实际开发...

    textarea保留换行的注意事项

    textarea 保留换行的注意事项 在 HTML 中,textarea 元素用于创建多行文本输入框,是用户输入大量文本的理想选择。但是,在使用 textarea 元素时,有一个需要注意的重要问题,即如何保留换行符。以下是相关的知识点...

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    这导致开发者在编写跨浏览器的JavaScript代码时需要额外的注意事项。 `class`属性用于设置或获取HTML元素的CSS类,允许通过类名来应用样式。在IE6和IE7中,尽管`getAttribute('class')`可以正确地获取设置的类名,...

    JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    **注意事项** 在实际应用中,除了修改源码,还可以考虑通过以下方式增强兼容性: 1. 使用条件注释或特性检测库(如Modernizr)来判断浏览器类型和版本,从而决定是否启用特定的修复代码。 2. 当条件允许时,升级到更...

Global site tag (gtag.js) - Google Analytics