IE6-IE9中tbody的innerHTML不能赋值的解决方法


Posted in Javascript onJune 05, 2014

IE6-IE9中tbody的innerHTML不能赋值,重现代码如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>IE6-IE9中tbody的innerHTML不能复制bug</title> 
</head> 
<body style="height:3000px"> 
<table> 
<tbody> 
<tr><td>aaa</td></tr> 
</tbody> 
</table> 
<p> 
<button id="btn1">GET</button><button id="btn2">SET</button> 
</p> 
<script> 
var tbody = document.getElementsByTagName('tbody')[0] 
function setTbody() { 
tbody.innerHTML = '<tr><td>bbb</td></tr>' 
} 
function getTbody() { 
alert(tbody.innerHTML) 
} 
btn1.onclick = function() { 
getTbody() 
} 
btn2.onclick = function() { 
setTbody() 
} 
</script> 
</body> 
</html>

两个按钮,第一个获取tbody的innerHTML,第二个设置tbody的innerHTML。

获取时所有浏览器都弹出了tr的字符串,但设置时IE6-9不支持,而且报错,如图
IE6-IE9中tbody的innerHTML不能赋值的解决方法 
可以利用特性判断来看浏览器是否支持tbody的innerHTML设值

var isupportTbodyInnerHTML = function () { 
var table = document.createElement('table') 
var tbody = document.createElement('tbody') 
table.appendChild(tbody) 
var boo = true 
try{ 
tbody.innerHTML = '<tr></tr>' 
} catch(e) { 
boo = false 
} 
return boo 
}() 
alert(isupportTbodyInnerHTML)

对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法
function setTBodyInnerHTML(tbody, html) { 
var div = document.createElement('div') 
div.innerHTML = '<table>' + html + '</table>' 
while(tbody.firstChild) { 
tbody.removeChild(tbody.firstChild) 
} 
tbody.appendChild(div.firstChild.firstChild) 
}

用一个div来包含一个table,然后删除tbody里的所有元素,最后给tbody添加div的第一个元素的第一个元素,即div>table>tr。

当然还有一个更精简的版本,它直接采用replaceChild方法替换

function setTBodyInnerHTML(tbody, html) { 
var div = document.createElement('div') 
div.innerHTML = '<table>' + html + '</table>' 
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody) 
}

从MSDN上记录上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是只读的(IE6-IE9)。

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JS的数组迭代方法
Feb 05 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
首页图片漂浮效果示例代码
Jun 05 #Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 #Javascript
javascript的事件触发器介绍的实现
Jun 05 #Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
You might like
php定界符
2014/06/19 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
kali中python版本的切换方法
2019/07/11 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
移动通信专业自荐信范文
2013/11/12 职场文书
入学申请自荐信范文
2014/02/26 职场文书
婚前保证书
2014/04/29 职场文书
公司员工安全协议书
2014/11/21 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年调度员工作总结
2015/04/30 职场文书