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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
JavaScript中的 new 命令
May 22 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
destoon数据库表说明汇总
2014/07/15 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python的re模块使用方法详解
2019/07/26 Python
python中数据库like模糊查询方式
2020/03/02 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
机电一体化毕业生求职信
2013/11/02 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
保险内勤岗位职责
2014/04/05 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript