2008-05-04

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

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

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


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

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 操作時,完全沒反應的現象。

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


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

table .hide{ display : none; }

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


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

0 回應: