主頁 > 知識庫 > IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案

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

熱門標簽:成都企業(yè)外呼系統(tǒng) 南通電銷外呼系統(tǒng)軟件 洛陽防封卡外呼系統(tǒng)廠家 智能語音電銷機器人客戶端 申請400電話移動 廣州防封電銷機器人廠家 上海400電話辦理到易號網(wǎng) 常州電話外呼系統(tǒng)招商 山東電銷機器人軟件

IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值,重現(xiàn)代碼如下

復制代碼 代碼如下:

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

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

您可能感興趣的文章:
  • IE6-IE9不支持table.innerHTML的解決方法分享
  • js的.innerHTML = ""IE9下顯示有錯誤的解決方法
  • IE6-IE9中tbody的innerHTML不能賦值的解決方法
  • IE6-IE9中tbody的innerHTML不能賦值的解決方法
  • IE6-IE9使用JSON、table.innerHTML所引發(fā)的問題

標簽:貴州 滄州 混顯 萊蕪 鶴壁 廣安 賀州 邵陽

巨人網(wǎng)絡通訊聲明:本文標題《IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案》,本文關鍵詞  IE6,IE7,IE8,IE9,中,tbody,的,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案》相關的同類信息!
  • 本頁收集關于IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案的相關信息資訊供網(wǎng)民參考!
  • 推薦文章