innerHTML:
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
TR innerHTML problem in IE.
在ie下,对于COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR,innerHTML属性是只读的。也就是说你不能通过innerhtml对这些标签进行操作。
方法一:利用td支持innerHTML为他们添加,你可以仿照下面的例子为你需要的标签添加
table.tr.innerHTML = “namexxxx”; works in Firefox, but doesn’t work in IE.
Quick solution:
1 2 3 4 5 6 7 8 9 10 |
<span style="font-weight: bold; color: #003366">var</span> table <span style="color: #339933">=</span> document.<span style="color: #660066">getElementById</span><span style="color: #009900">(</span>”yourtable”<span style="color: #009900">)</span><span style="color: #339933">;</span> <span style="font-weight: bold; color: #003366">var</span> rows <span style="color: #339933">=</span> table.<span style="color: #660066">rows</span><span style="color: #339933">;</span> <span style="font-weight: bold; color: #000066">if</span><span style="color: #009900">(</span>document.<span style="color: #660066">all</span><span style="color: #009900">)</span> <span style="color: #009900">{</span> rows<span style="color: #009900">[</span><span style="color: #cc0000">0</span><span style="color: #009900">]</span>.<span style="color: #660066">swapNode</span><span style="color: #009900">(</span>rows<span style="color: #009900">[</span><span style="color: #cc0000">1</span><span style="color: #009900">]</span><span style="color: #009900">)</span><span style="color: #339933">;</span> <span style="color: #006600; font-style: italic">// </span> <span style="color: #009900">}</span> <span style="font-weight: bold; color: #000066">else</span> <span style="color: #009900">{</span> <span style="font-weight: bold; color: #003366">var</span> t <span style="color: #339933">=</span> rows<span style="color: #009900">[</span><span style="color: #cc0000">0</span><span style="color: #009900">]</span>.<span style="color: #660066">innerHTML</span><span style="color: #339933">;</span> rows<span style="color: #009900">[</span><span style="color: #cc0000">0</span><span style="color: #009900">]</span>.<span style="color: #660066">innerHTML</span> <span style="color: #339933">=</span> rows<span style="color: #009900">[</span><span style="color: #cc0000">1</span><span style="color: #009900">]</span>.<span style="color: #660066">innerHTML</span><span style="color: #339933">;</span> rows<span style="color: #009900">[</span><span style="color: #cc0000">1</span><span style="color: #009900">]</span>.<span style="color: #660066">innerHTML</span> <span style="color: #339933">=</span> t<span style="color: #339933">;</span> <span style="color: #009900">}</span> |
To solve “tr.innerHTML” doesn’t work in IE , below code works in firefox and IE
—————————————-
var otab = document.getElementById(”tab_me”); // you must specify table id.
var str = “”;
for(i=0; i< otab.rows[0].cells.length; i++) {
otab.rows[0].cells[i].innerHTML = “new content here”;
str += otab.rows[0].cells[i].innerHTML + “n”;
}
alert(str);
方法二:讲table放到一个div里,利用div支持innerHTML来实现
1 |
document.getElementById(”yourtable”).firstChild=’’; |
方法三:利用appendChild
此方法可以实现但是好像tr也不支持appendChild,需要trick一下
转载请注明,本文原始标题及链接: 解决ie下table,tr,td等的innerHTML只读问题
原载于http://donotdot.cn/post/311.htm
转载自:风也吹不起[http://donotdot.cn]