国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

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

2024-08-26 00:17:49
字體:
來源:轉載
供稿:網友
最近發現各大類庫都能利用xxx.innerHTML=HTML片斷來生成節點元素,再把它們插入到目標元素的各個位置上。這東西實際上就是insertAdjacentHTML,但是IE可惡的innerHTML把這優勢變成劣勢。
 
 

IE6/IE7/IE8/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不支持,而且報錯,如圖

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

可以利用特性判斷來看瀏覽器是否支持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)

 

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


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 珲春市| 游戏| 永新县| 西青区| 仪陇县| 托里县| 梅河口市| 上高县| 江达县| 桃源县| 耒阳市| 中宁县| 兴义市| 张家川| 沭阳县| 广东省| 望谟县| 苍山县| 平远县| 山丹县| 钟山县| 准格尔旗| 浪卡子县| 琼结县| 喀喇| 丰顺县| 辽源市| 遵义县| 义乌市| 偃师市| 都匀市| 封开县| 清新县| 南丹县| 改则县| 涪陵区| 望城县| 托克逊县| 舒城县| 洛扎县| 江城|