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. 企业建站系统MiinCMP1.0.5 标准版公布!

    2014-5-6日,Juuluu公布其企业建站系统MiinCMP1.0.5 标准版,1.0.5是一款相对成熟的企业站点解决方式.执行MiinCMP1.0.5,仅仅需2M的mysql,50m的java空 ...

  2. 算法笔记_070:BellmanFord算法简单介绍（Java）

    目录 1 问题描述 2 解决方案 2.1 具体编码   1 问题描述 何为BellmanFord算法? BellmanFord算法功能:给定一个加权连通图,选取一个顶点,称为起点,求取起点到其它所有顶 ...

  3. javascript数据结构和算法 第二章 (数组) 二

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符切割,返回字符串数组表示. 这里有个样例: var names = [&qu ...

  4. win7 ARP 命令运行失败解决办法

    直接运行cmd,运行arp -d * ,arp -s会出现下面的错误提示: ARP 项删除失败: 请求的操作需要提升. ARP 项添加失败: 拒绝访问.或提示:ARP 项添加失败: 请求的操作需要提升 ...

  5. javascript Date日期类

      四.Date日期类 迁移时间:2017年5月27日18:43:02 Author:Marydon (一)对日期进行格式化(日期转字符串) 自定义Date日期类的format()格式化方法 方式一: ...

  6. 一个完全摆脱findViewById的自动绑定库

    代码地址如下:http://www.demodashi.com/demo/13504.html 问题 先来看一个正常的写法: <?xml version="1.0" enco ...

  7. [Java Performance] JVM 线程调优

    调整线程栈空间 当很缺少内存时,能够调整线程使用的内存. 每一个线程都有一个栈,用来记录该线程的调用栈信息.线程中的栈的默认空间是有OS和JVM的版本号决定的: OS 32-bit 64-bit Li ...

  8. 解疑 Numpy 中的 transpose（转置）和swapaxes（两个轴转置变换）

    1.一维和二维数据 .T等同于.transopse 2.三维及更多维数据 对于 z 轴 与 x 轴的变换 In [40]: arr = np.arange(16).reshape((2, 2, 4)) ...

  9. 使用jq Deferred防止代码被回调函数分解分解的支离破碎

    //移动人物 function moveInterval(stopPosotion){ var dtd = $.Deferred(); // 生成Deferred对象 var yidong= wind ...

  10. 补知识：EntityFramework Core映射关系详解

    前言 本节我们回归下EF Core基础,来讲述EF Core中到底是如何映射的,废话少说,我们开始. One-Many Relationship(一对多关系) 首先我们从最简单的一对多关系说起,我们给 ...