`

IE6-IE9中tbody的innerHTML不能赋值bug

    博客分类:
  • js
阅读更多

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

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

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

 

  • 大小: 3.2 KB
分享到:
评论

相关推荐

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8/&gt; &lt;title&gt;IE6-IE9中tbody的innerHTML不能复制bug&lt;/title&gt; &lt;/...

    IE6-IE9兼容性问题列表及解决办法

    # IE6-IE9兼容性问题列表及解决办法 ## 概述 随着技术的发展,浏览器不断迭代更新,为了确保网站能在不同的浏览器版本下正常显示和运行,了解并解决兼容性问题是前端开发者的重要任务之一。从IE6到IE9,微软的...

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

    最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    总的来说,当在IE6、7、8、9中遇到innerHTML无法赋值的问题时,开发者应转向使用DOM API进行更底层的操作,而不是依赖innerHTML属性。这可能需要更多的代码量,但能确保在所有浏览器中的兼容性。同时,随着现代...

    IE6-IE9使用JSON、table[removed]所引发的问题

    在早期的Internet Explorer浏览器,尤其是IE6到IE9版本中,开发者经常遇到一些与现代Web标准不兼容的问题。本文主要探讨了两个在这些版本中常见的问题:JSON支持和使用`innerHTML`属性更新`table`元素时遇到的挑战,...

    IE6-IE9不支持table[removed]的解决方法分享

    总结来说,解决IE6-IE9不支持`table.innerHTML`的问题,需要借助于创建临时元素和操作DOM结构的方法。这个方法不仅适用于`table`元素,也可以扩展到其他不支持`innerHTML`的元素,以实现类似的功能。同时,随着...

    IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏...排查了半天,结果是IE的table元素为只读,不能使用innerHTML!!!! 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T

    解决ie6 select的title不能显示的问题

    本文将针对一个特定的问题——如何在Internet Explorer 6(IE6)中使`select`元素的`title`属性能够正常显示——进行详细解析,并提供一种通过JavaScript来实现解决方案的方法。 #### 问题背景 在IE6中,当用户...

    IE 不兼容的几个js问题及解决方法

    在IE中,`innerHTML`属性不能用于动态地设置`&lt;table&gt;`的内容。但可以用于`&lt;div&gt;`或`&lt;span&gt;`等元素。 **解决方法:** 如果需要动态更新表格内容,建议使用上述创建元素的方法,而不是直接修改`innerHTML`。例如,...

    IE 下的只读 innerHTML

    值得注意的是,如果`&lt;table&gt;`元素没有`&lt;tbody&gt;`子元素,直接在IE6中对`table`使用`appendChild`方法是无效的,因为IE6不支持对`table`元素直接进行`appendChild`操作(IE8及以上版本已修复此问题)。在这种情况下,...

    IE中关于使用innerHTML加入HTML代码的问题

    然而,这个属性在不同浏览器中的行为并不完全一致,尤其是在Internet Explorer(IE)中。这个问题在处理某些特定类型的HTML元素时尤为突出。 在非IE浏览器(如Firefox、Chrome、Safari等)中,innerHTML可以用于...

    IE创建动态表格注意事项

    IE8及更低版本不支持原生的JSON对象,因此需要使用JSON2.js等库来提供兼容性。 7. **性能优化**: - 动态创建大量表格元素可能导致性能问题,特别是在旧版IE中。使用文档片段(`document.createDocumentFragment()...

    jquery appen table 问题 ie8下解决方法

    可以先将字符串赋值给元素的`innerHTML`属性,然后再用`append()`。 3. **示例代码:** ```javascript // 创建新的表格行和单元格 var newRow = document.createElement('tr'); var newCell = document....

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...

    Firefox和IE兼容参考

    在网页开发过程中,Firefox(火狐浏览器)和Internet Explorer(IE浏览器)的兼容性问题一直是一大挑战。这两个浏览器在解析HTML、CSS以及JavaScript时有着不同的实现方式,导致某些代码在Firefox下正常运行,但在IE...

    jsp\(二)未知的运行时错误(ie6的未指明的错误) .doc

    在IE6及后续版本的IE浏览器中,这些元素被认为是只读的,因此直接修改它们的`innerHTML`属性会导致异常。 #### 异常代码示例 以下是触发异常的代码示例: ```html &lt;table id="t1"&gt;&lt;/table&gt; document....

Global site tag (gtag.js) - Google Analytics