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


Posted in Javascript onSeptember 26, 2014

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

Js代码

<!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)

点击下,看看你此时浏览本博客的浏览器是否支持

Click Me

<script type="text/javascript">// <![CDATA[ var isupportTbodyInnerHTML = function () { var table = document.createElement('table') var tbody = document.createElement('tbody') var tr = document.createElement('tr') var td = document.createElement('td') var txt = document.createTextNode('a') td.appendChild(txt) tr.appendChild(td) tbody.appendChild(tr) table.appendChild(tbody) var boo = true try{ tbody.innerHTML = '<tr><td>b</td></tr>' } catch(e) { boo = false } return boo }(); tbodyInnerHTML.onclick = function() { if (isupportTbodyInnerHTML) { alert('你的浏览器支持tbody的innerHTML赋值') } else { alert('你的浏览器是IE6-9内核,不支持tbody的innerHTML赋值') } } // ]]></script>

对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法

Js代码

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方法替换

Js代码

function setTBodyInnerHTML(tbody, html) { 
var div = document.createElement('div') 
div.innerHTML = '<table>' + html + '</table>' 
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody) 
}
Javascript 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
如何实现js拖拽效果及原理解析
May 08 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 #Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 #Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 #Javascript
javascript 自定义回调函数示例代码
Sep 26 #Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 #Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 #Javascript
jquery实现一个简单好用的弹出框
Sep 26 #Javascript
You might like
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
初识php MVC
2014/09/10 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
春季运动会加油词
2015/07/18 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python