table.innerHTML不支持IE6到9的解决方法

今天使用javascript操作innerHTML的时候ie发生问题,查找发现:

IE9:Invalid target element for this operation.

IE6-8:Unknown runtime error

查找IE的文档(http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx)后发现有这么一段:

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

以上对象在ie6-9之间是只读的哦

解决方法2个:

第一个:

<html>
<head>
<script type=”text/javascript”>
function insRow()
{
var x=document.getElementById(‘myTable’).insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML=”NEW CELL1″
z.innerHTML=”NEW CELL2″
}
</script>
</head>

<body>
<table id=”myTable” border=”1″>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type=”button” onclick=”insRow()” value=”插入行”>

</body>
</html>

第二个:
var oTable=document.getElementById(“test”);
//oTable.innerHTML=”<tr><td>innerHTML</td></tr>”;
setTableInnerHTML(oTable,”<tr><td>innerHTML</td></tr>”);

function setTableInnerHTML(table, html) {
if(navigator && navigator.userAgent.match(/msie/i)){
var temp = table.ownerDocument.createElement(‘div’);
temp.innerHTML = ‘<table><tbody>’ + html + ‘</tbody></table>’;
if(table.tBodies.length == 0){
var tbody=document.createElement(“tbody”);
table.appendChild(tbody);
}
table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);
} else {
table.innerHTML=html;
}
}

这里只是对table做了处理,对其他不支持的元素可以用类似的方案。

另外,IE10中table已经支持innerHTML了。

此条目发表在开源代码分类目录,贴了标签。将固定链接加入收藏夹。

发表回复