IE6-IE9中tbody的innerHTML不能赋值bug
来源:互联网 发布:域名权重查询 编辑:程序博客网 时间:2024/05/14 03:15
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下
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)
点击下,看看你此时浏览本博客的浏览器是否支持
对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法
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方法替换
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)
}
从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.
Youcan change the value of the title element using the document.title property.
Tochange the contents of the table, tFoot, tHead, and tr elements, use the table object modeldescribed in BuildingTables Dynamically. However, to change the content of aparticular cell, you can use innerHTML.
- IE6-IE9中tbody的innerHTML不能赋值bug
- IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
- IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
- IE6-9中tbody.innerHTML不能赋值问题;SCRIPT600:该操作的目标元件无效
- ie6-ie9中不支持table.innerHTML的问题
- IE6-IE9不支持table.innerHTML的解决方法
- IE6-IE9不支持table.innerHTML的解决方法分享
- IE6下,不允许向innerHTML中赋值形如“”的代码
- 原生js --IE6-IE9使用JSON、table.innerHTML所引发的问题
- 解决IE6背景图片不能缓存的bug
- IE6与IE7中,innerHTML获取param的区别
- ie9渲染的bug
- IE6的BUG:window.onload里用innerHTML创建的img会忽略本地缓存
- 关于tbody的使用 及其innerHTML的解决方法
- IE6中绝对定位的BUG
- IE6 中 a:hover 的bug
- IE6下使用滤镜后链接不能点击的BUG
- ie9 overflow中hover scrollbar高度增高的bug
- Android去除烦人的默认闪退Dialog
- python的使用环境总结
- 在iOS上使用AirPrint实现无线打印功能
- VIM mark功能
- Android中高亮变色显示文本中的关键字
- IE6-IE9中tbody的innerHTML不能赋值bug
- android app 跳转到微信
- 从ImageNet数据集上的卷积神经网络可以学到什么What I learned from competing against a ConvNet on ImageNet
- div的js移动
- 编程小练习
- YTUOJ之删除相同元素(线性表)
- 继承与实现的理解
- LeetCode 191 -Number of 1 Bits ( JAVA )
- BZOJ 3573: [Hnoi2014]米特运输