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

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

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，可以使用如下替代方法

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方法替换

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.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.

相关：

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

IE6-9中tbody的innerHTML不能赋值bug的更多相关文章

  1. IE6-IE9中tbody的innerHTML不能赋值

    对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法 Js代码 function setTBodyInnerHTML(tbody, html) { var div = d ...

  2. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  3. IE6/7中setAttribute不支持class/for/rowspan/colspan等属性

    如设置class属性 ? 1 el.setAttribute('class', 'abc'); 在IE6/7中样式“abc”将没有起作用,虽然使用el.getAttribute('class')能取到 ...

  4. devexpress中ASPxGridView控件初始化赋值

    写在ASPxGridView中OnCellEditorInitialize="ASPxGridView_progoods_CellEditorInitialize"  事件中: / ...

  5. C++中复制构造函数与重载赋值操作符总结

    前言 这篇文章将对C++中复制构造函数和重载赋值操作符进行总结,包括以下内容: 1.复制构造函数和重载赋值操作符的定义: 2.复制构造函数和重载赋值操作符的调用时机: 3.复制构造函数和重载赋值操作符 ...

  6. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

  7. IE6/7中li浮动外边距无法撑开ul的解决方法

    昨天群里有人提出了这样的问题: 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 < ...

  8. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  9. 关于makefile中变量的多次赋值以及override指令

    1 基本原则如下 1.1 原则1 变量的普通赋值是有先后顺序的,后面的赋值会覆盖掉前面的赋值. 1.2 原则2 使用的时候,用的是其前面最后的赋值,就算其后面有使用了override指令的赋值也不会影 ...

随机推荐

  1. HTML--Table布局

    <DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content= ...

  2. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  3. vs 2013各个版本密钥

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  4. 使用layout_weight设置控件占屏幕百分比

    水平LinearLayout中如果A,B两个控件都是layout_weight="1",那么控件在水平方向占比为A的layout_width+1/2空闲空间,B的layout_wi ...

  5. hibernate映射文件one-to-one

    one-to-one 元素 属性: name:映射类属性的名字 class:映射的目标类 cascade:设置操作中的级联策略 可选值为 all所有操作情况均进行级联.none所有操作情况均不进行级联 ...

  6. UML类图相关实践

    最近看了下设计模式,其中无可避免会设计很多类图,UML类图对于学习设计模式很重要,关于设计模式,我也会在这里写上一写,这一篇关于UML类图的就先当个铺垫. 1.先上一个简单的类图来简单说明下: 1). ...

  7. 一些实用但不为人知的Unix命令

    浮现在脑海的很多 Linux命令,其中一些不为人知,另一些则很常见,如下: xargs or parallel: 并行运行一些程序,命令有很多的选项 sed and awk: 广为人知并且非常有用的处 ...

  8. TeamCity配置笔记

    1.编译sln 2.发布网站 3.重复代码检测 4.代码分析 5.单元测试&覆盖率测试 查看代码覆盖率 7.代码签入时自动触发编译 8.通知 1.在teamcity安装目录中找到TrayNot ...

  9. [Angularjs]视图和路由（四）

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  10. javascript --- 再谈词法分析

    javascript代码是如何执行的呢,分为六个步骤(就像把大象装进冰箱总共分几步?): 第一步:载入第一个js代码段(注:script标签对内的代码或是引用js代码,这也说明js并不是一行一行(单纯 ...