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
1
|
<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代码
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)
}
|