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 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Less 安装及基本用法
May 05 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
首页图片漂浮效果示例代码
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
风格模板初级不完全修改教程
2006/10/09 PHP
php 操作调试的方法
2012/07/12 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
JS作用域深度解析
2016/12/29 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
python中文乱码的解决方法
2013/11/04 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python文件读写常见用法总结
2019/02/22 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
致200米运动员广播稿
2014/02/06 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
关于安全演讲稿
2014/05/09 职场文书
售后服务承诺书模板
2014/05/21 职场文书
植树造林的宣传标语
2014/06/23 职场文书
学校政风行风整改方案
2014/10/25 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python