IE6-IE9中tbody的innerHTML不能赋值的解决方法
更新时间：2014年09月26日 17:31:18 投稿：whsnow
这篇文章主要介绍了IE6-IE9中tbody的innerHTML不能赋值的解决方法，很实用，需要的朋友可以参考下
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不支持，而且报错，如图
可以利用特性判断来看浏览器是否支持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，感兴趣的朋友可以了解下2020-09-09
这篇文章主要为大家详细介绍了微信小程序日历组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结,下面这篇文章主要给大家总结介绍了关于小程序页面之间数据传递的4种方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了360doc网站不登录就无法复制内容的解决方法,需要的朋友可以参考下2018-01-01
在js中将中文用gb2312编码。如，“我”编码后应该是“%CE%D2”。2009-12-12
这篇文章主要介绍了Validform表单验证，包括通用表单验证方法的知识，本文给大家介绍的非常详细具有参考借鉴价值,需要的朋友可以参考下2016-10-10
详解JavaScript中?.、??和??=的用法及使用场景
这篇文章主要为大家详细介绍了JavaScript中?.、??和??=的用法及使用场景,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了浅谈小程序globalData的那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了 EditPlus中的正则表达式 实战(4)的相关资料,需要的朋友可以参考下2016-12-12
微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】
这篇文章主要介绍了微信小程序五子棋游戏,可实现五子棋的棋盘绘制,重置,对弈判定等功能实现,并附带demo源码供读者下载参考,需要的朋友可以参考下2019-02-02
最新评论