IE6-IE9 tbody innerHTML cannot be assigned, reproduce the code as follows
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html>
<meta charset=
"utf-8"
/>
<title>IE6-IE9中tbody的innerHTML不能复制bug</title>
<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>
|
Two buttons, the first to get Tbody's innerHTML, and the second to set the Tbody innerHTML.
Obtained when all browsers pop up the TR string, but the settings ie6-9 not support, and error,
You can use the feature to determine whether the browser supports TBODY innerHTML setting values
?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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)
|
Click to see if the browser you are browsing this blog supports
Click Me
For IE6-IE9 if you want to set tbody innerHTML, you can use the following workaround
?
1 2 3 4 5 6 7 8 |
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) }
|
Use a div to include a table, then delete all the elements in the tbody, and finally add the first element of the first element of the div to Tbody, which is div>table>tr.
Of course there is a more streamlined version, which is replaced directly by the ReplaceChild method
?
1 2 3) 4 5 |
function setTBodyInnerHTML(tbody, html) { var div = document.createElement( ‘div‘ ) div.innerHTML = ‘<table>‘ + html + ‘</table>‘ tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody) } |
The innerHTML of Col, Colgroup, frameset, HTML, head, style, table, TFOOT, THead, title, and TR are read-only (IE6-IE9) from the record on MSDN.
TheInnerHTMLProperty was read-only on theCol,Colgroup,FrameSet,HTML,Head,style,Table,TBody,TFoot,THead,title, andTRObjects.
you can change the value of the < Span style= "Background-color:rgb (192, 192, 192); > title element using The Document . Title property.
The contents of the table, tFoot, tHead, and tr elements, use the table Obje CT model described in Building Tables dynamically. However, to change the content of a particular cells, you can use InnerHTML.
Related:
http://msdn.microsoft.com/en-us/library/ms533897 (vs.85). aspx