IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值，重現(xiàn)代碼如下
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IE6-IE9中tbody的innerHTML不能復(fù)制bug</title>
</head>
<body>
<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>
兩個(gè)按鈕，第一個(gè)獲取tbody的innerHTML，第二個(gè)設(shè)置tbody的innerHTML。
獲取時(shí)所有瀏覽器都彈出了tr的字符串，但設(shè)置時(shí)IE6-9不支持，而且報(bào)錯(cuò)，如圖
可以利用特性判斷來看瀏覽器是否支持tbody的innerHTML設(shè)值
復(fù)制代碼 代碼如下:
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)
對(duì)于IE6-IE9里如果要設(shè)置tbody的innerHTML，可以使用如下替代方法
復(fù)制代碼 代碼如下:
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)
}
用一個(gè)div來包含一個(gè)table，然后刪除tbody里的所有元素，最后給tbody添加div的第一個(gè)元素的第一個(gè)元素，即div>table>tr。
當(dāng)然還有一個(gè)更精簡(jiǎn)的版本，它直接采用replaceChild方法替換
復(fù)制代碼 代碼如下:
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.
相關(guān)文章：
1. Android Studio OkHttpClient使用教程詳解2. 使用HttpClient增刪改查ASP.NET Web API服務(wù)3. JSP的Cookie在登錄中的使用4. android使用ViewPager實(shí)現(xiàn)圖片自動(dòng)切換5. Java httpClient介紹以及使用示例6. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案7. Android實(shí)現(xiàn)View滑動(dòng)效果的6種方法8. AspNetCore&MassTransit Courier實(shí)現(xiàn)分布式事務(wù)的詳細(xì)過程9. Android開發(fā)實(shí)現(xiàn)TextView超鏈接5種方式源碼實(shí)例10. Android View 事件防抖的兩種方案
網(wǎng)公網(wǎng)安備