这篇文章主要介绍了IE6-IE9中tbody的innerHTML不能赋值的解决方法,需要的朋友可以参考下
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不支持,而且报错,如图
 
可以利用特性判断来看浏览器是否支持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.
最新资讯
蔚来汽车资金“迷局”:遭高瓴清仓 传吉利入股

蔚来汽车资金“迷局”

作为造车新势力的头部玩家,蔚来汽车在资本市场的频频动
特斯拉“单挑”电池巨头:强势买方的超级野心

特斯拉“单挑”电池巨

上海工厂投产后,特斯拉的动力电池供应链终于开始真正地
疫情“压裂”蛋壳  高速扩张带来的隐与忧

疫情“压裂”蛋壳 高

连日来,长租公寓蛋壳、自如在多个城市遭房东、租客双重
采用无钴电池即磷酸铁锂电池?特斯拉说不一定

采用无钴电池即磷酸铁

2月21日,特斯拉表示:”请留意四月特斯拉的电池发布会,无
MWC大会被取消 主办方GSMA称不向参展商退费

MWC大会被取消 主办方

据国外媒体报道,2020年“世界移动通信大会”(MWC)主办方
外卖骑手“留守”武汉:愿为这座城做亏本买卖

外卖骑手“留守”武汉

“自己也挺害怕,但毕竟选择了这份工作”……武汉封城至
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大