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)
}

ie tbody table 兼容方法的更多相关文章

  1. placeholder兼容方法（兼容IE8以上浏览器）

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  2. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  3. SAP ABAP规划 使用LOOP READ TABLE该方法取代双LOOP内部表的方法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVlemhhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  4. JavaScript后台代码操作HTML TABLE的方法

    原文:JavaScript后台代码操作HTML TABLE的方法 var rowNum = 0,fileNum = 0; //行号与列号 var oNewRow; //定义插入行对象 var oNew ...

  5. js 拼接table 的方法

    <html> <head> <title>test page</title> <script type='text/javascript'> ...

  6. AJAX原理解析与兼容方法封装

    AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

  7. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  8. CSS3新特性，兼容性，兼容方法总结

    css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4 ...

  9. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

随机推荐

  1. Android秒级编译工具Freeline

    Freeline 是 Android 平台上的秒级编译方案,Instant Run 的替代品,由蚂蚁聚宝Android 团队开发,它可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设 ...

  2. 【转】linux性能相关的命令和概念

    1. top命令结果解读 23:31:27:系统时间 up 8 days: 表示从开机到现在,一共运行了8天 1 user:1个用户正在使用系统 load average:系统负载,即任务队列的平均长 ...

  3. 算法笔记_103:蓝桥杯练习 算法提高 金明的预算方案（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些 ...

  4. Android Exception 7(attempt to re-open an already-closed object )

    07-23 18:16:17.641: W/SQLiteConnectionPool(28390): A SQLiteConnection object for database '/storage/ ...

  5. 基于redis的简易分布式爬虫框架

    代码地址如下:http://www.demodashi.com/demo/13338.html 开发环境 Python 3.6 Requests Redis 3.2.100 Pycharm(非必需,但 ...

  6. oracle 使用REGEXP_SUBSTR正则表达式拆分字符串

    SELECT REGEXP_SUBSTR ('first field, second field , third field', '[^,]+', 1,rownum) FROM DUAL CONNEC ...

  7. Jekins部署.net站点

    前提 1.你需要一台windows服务 可以装vs的且有重启电脑权限的(具体vs版本根据你的团队决定) 2.下载jekins 安装包 地址:https://jenkins.io/download/   ...

  8. python selenium --一些常用方法

    · text  获取该元素的文本 · submit  提交表单 · get_attribute  获得属性值 text   用于获取元素的文本信息 下面把百度首页底部的声明打印输出 #coding=u ...

  9. c++ 返回对象的引用要小心

    除非能保证返回对象的生命周期足够长. 一定不要返回临时对象的引用.

  10. 安装inkscape for mac注意事项

    今天为了安装inkscape for mac,搞了一下午.按以前的方法,先安最新的XQuartz,再安最新的inkscape,在运行inkscape前先打开XQuartz.但是发现不行了,inksca ...