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. jqGrid动态列

    HTML代码: <div id="divList"> <div class="toolbar"> </div> <ta ...

  2. 保存登录信息的Cookie加密技术

    所有需要账户登录的website 基本都会想到这样一个问题, 如何保持用户在一定时间内登录有效. 最近本人就在项目中遇到这样的需求,某些页面只能Admin账户登录后访问, 当登录Admin账户后如何才 ...

  3. EasyUI个人项目晒图（续）

    晒自己做的一个管理系统(清新风格)EasyUI 这是自己上一次的文章了,只是给大家看一下自己的美观度是不是还是停留在新手的阶段!反正我自己认为我已经不是一个新手了吧!虽然技术永远学不完,我可以说,我和 ...

  4. Servlet获得Http请求,GET/POST

    Servlet获得Http请求 Http请求信息格式 请求行(方法提交方式,URI,Http协议版本) GET方式提交:URI会包含查询字符串 POST方式提交:URI不会包含查询字符串 请求头 Ho ...

  5. Hibernate框架之入门

    1.Hibernate框架简述 Hibernate的核心组件在基于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.proper ...

  6. 从" ThinkPHP 开发规范 "看 PHP 的命名规范和开发建议

    稍稍水一篇博客,摘抄自Think PHP 的开发规范,很有引导性,我们可以将这些规范实践到原生 PHP 中. 命名规范 使用ThinkPHP开发的过程中应该尽量遵循下列命名规范: 类文件都是以.cla ...

  7. 如何给span设置高度宽度？

    内容提要:给Span设置高度和宽度后没有作用.本文介绍了如何如何给span设置高度宽度. CSS模型中经常用的容器是DIV和span. 给Span设置高度和宽度后没有作用. <style typ ...

  8. spring task定时器笔记

    定时器有两种方式 1.延迟启动 <bean id="timerTaskRunnerChain" class="bingo.uam.task.TimerTaskRun ...

  9. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  10. abap number range

    如有转载请注明出处:http://blog.csdn.net/donkey2004112103/archive/2009/04/13/4070996.aspx 1.sap numbe range在标准 ...