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 相关文章推荐
JS应用正则表达式转换大小写示例
Sep 18 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jquery不常用方法汇总
Jul 26 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php中的异常和错误浅析
2017/05/03 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
Python制作豆瓣图片的爬虫
2017/12/28 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
详解Python 解压缩文件
2019/04/09 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
运动会100米解说词
2014/01/23 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
常用的Python代码调试工具总结
2021/06/23 Python
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL