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

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

Js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!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设值

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

Js代码

1
2
3
4
5
6
7
8

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代码

1
2
3
4
5

function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}

时间： 2024-08-04 00:42:51

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

IE6-IE9中tbody的innerHTML不能赋值的解决方法的相关文章

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

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案_经验交流

window.location.href中url中数据量太大时的解决方法

wps文字中的字体无法继续放大的解决方法

win7系统中常见的一些小问题和解决方法

win7系统中excel导入外部数据出错的解决方法

PHP中file_exists()判断中文文件名无效的解决方法_php技巧

flash as3 中动态加载库类失败解决方法

eclipse-python已安装了一个包，但是导入包中的模块时报错，求解决方法