IE6-9中tbody的innerHTML不能賦值bug


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)

 

點擊下,看看你此時瀏覽本博客的瀏覽器是否支持 

 

對於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 colcolGroupframeSethtmlheadstyletabletBodytFoottHeadtitle, and tr objects.

You can change the value of the title element using the document.title property.

To change the contents of the tabletFoottHead, 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.

 

相關:

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM