在 IE 中對表格的操作問題(innerHTML,style)

問題1：在對以存在的表格用 innerHTML 新增列或其他 DOM 子節點時，會發生錯誤或警告，或者是完全沒反應。

原始碼

1. table.innerHTML+="<tr><td>test</td></tr>"; 

table.innerHTML+="<tr><td>test</td></tr>";

解決方法：採用 createElement 去建立 DOM 物件，再用 insertBefore 插入新的子節點。

原始碼

1. var tdObj=document.createElement('td'); 
2. trObj.appendChild(document.createTextNode("test")); 
3.  
4. var trObj=document.createElement('tr'); 
5. trObj.insertBefore(tdObj); 
6.  
7. table.insertBefore(trObj); 

var tdObj=document.createElement('td');
trObj.appendChild(document.createTextNode("test"));

var trObj=document.createElement('tr');
trObj.insertBefore(tdObj);

table.insertBefore(trObj);

問題2：在現存表格中的子節點(tr,td)作 style 操作時，完全沒反應的現象。

原始碼

1. tr.style.display="none"; 
2. td.style.display="none"; 

tr.style.display="none";
td.style.display="none";

解決方法：利用 className 去套用以設定好的樣式。

原始碼

1. table .hide{ display : none; } 

table .hide{ display : none; }

原始碼

1. tr.className="hide"; 
2. td.className="hide"; 

tr.className="hide";
td.className="hide";

目前我只在 IE 上遇到這些問題，Firefox 則不會有這樣的問題，可能是 IE 對 table 的 DOM 解析比較特別，其他的 DOM 物件都不會有類似的狀況。