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 相关文章推荐
JS操作数据库的实例代码
Oct 17 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
原生js简单实现放大镜特效
May 16 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
js使用formData实现批量上传
Mar 27 Javascript
JS如何生成随机验证码
Mar 02 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JS 自动安装exe程序
2008/11/30 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Python拼接字符串的7种方法总结
2018/11/01 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
英文商务邀请信
2014/01/22 职场文书
四群教育工作实施方案
2014/03/26 职场文书
小学数学课后反思
2014/04/23 职场文书
担保书范文
2015/01/20 职场文书
中学教师个人总结
2015/02/10 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
python神经网络Xception模型
2022/05/06 Python