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

時間 2019-11-19

標籤 ie6 tbody innerhtml 不能賦值 bug 欄目瀏覽器简体版

原文原文鏈接

IE6-IE9中tbody的innerHTML不能賦值，重現代碼以下javascript

<!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。html

獲取時全部瀏覽器都彈出了tr的字符串，但設置時IE6-9不支持，並且報錯，如圖java

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

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

對於IE6-IE9裏若是要設置tbody的innerHTML，可使用以下替代方法spa

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。3d

固然還有一個更精簡的版本，它直接採用replaceChild方法替換htm

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）。blog

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.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。