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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
jquery默认校验规则整理
Mar 24 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
js实现单元格拖拽效果
Feb 10 Javascript
Vue.js仿Select下拉框效果
Feb 18 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
php 模拟POST|GET操作实现代码
2010/07/20 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python 通配符删除文件的实例
2018/04/24 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Django中的Model操作表的实现
2018/07/24 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python新手学习装饰器
2020/06/04 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
月度优秀员工获奖感言
2014/08/16 职场文书
领导班子对照检查材料
2014/09/22 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书