`

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

    博客分类：
  • js
jstable innerHTML 
阅读更多

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
分享到：
| javascript之DOM操作当前节点的相关节点
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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....

Magicbox
Global site tag (gtag.js) - Google Analytics