当前位置:  编程技术>WEB前端

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    来源: 互联网  发布时间:2014-10-07

    本文导语:  IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 代码如下:                    IE6-IE9中tbody的innerHTML不能复制bug                                            aaa                          ...

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下

代码如下:



   
       
        IE6-IE9中tbody的innerHTML不能复制bug
   
   
       
           
                aaa
           
       
       


            GETSET
       


       
            var tbody = document.getElementsByTagName('tbody')[0]
            function setTbody() {
                tbody.innerHTML = 'bbb'
            }
            function getTbody() {
                alert(tbody.innerHTML)
            }
            btn1.onclick = function() {
                getTbody()
            }
            btn2.onclick = function() {
                setTbody()
            }
       
   

两个按钮,第一个获取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 = ''
    } catch(e) {
        boo = false
    }
    return boo
}()
alert(isupportTbodyInnerHTML)

对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法

代码如下:

function setTBodyInnerHTML(tbody, html) {
    var div = document.createElement('div')
    div.innerHTML = '' + html + ''
    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 = '' + html + ''
    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.


    
 
 

您可能感兴趣的文章:

 
本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • ie6,ie7,ie8完美支持position:fixed的终极解决方案
  • IE6还支持applet 吗!!
  • IE6对XML的支持比较好,但不支持JAVA……
  • IE6.0 是否支持java2 ?
  • 区分IE6,IE7,firefox的CSS hack
  • 小问题一个:ie6是否支持java2,先答先得(当然得答对)!
  • 解决IE6 3像素Bug的css写法
  • 初学者问题:IE6还支持JAVA虚拟机吗?
  • 怎样让 IE6 自动识别文字的编码?
  • 请问IE6怎么不支持JAVA(想知道详细一点)?(对JAVA不熟想了解以下)
  • css ie6 ie7 ff的CSS hack使用技巧
  • Bootstrap 的 IE6 兼容扩展 Bsie
  • ie6 注释引起的问题
  • 在servlet里面用xml和xslt合成html文件,在ie5里面能正常显示,ie6里面不能正常显示!
  • IE6网页神奇BUG
  • 在Win2000Server上安装IE6,会不会对编Java有影响???
  • 我的applet为什么只能在netscape下显示出来,IE6就显示不出来??
  • jquery fancybox ie6不显示关闭按钮的解决办法
  • IE6不能正常解析CSS文件问题的解决方法及原因分析
  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)
  • Tomcat + win2000 + IE6.0 修改JSP,关于页面显示不刷新的问题。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号