先日のJSで結合されたtable内のセルを分割するアレですが、手を加えてIEでも動くようにしてみました。
IE9pp2ではそれっぽく動いています。Chrome7でも同じように動いていました。お試しの際は自己責任でお願いします。
以下ヘタクソース
function splitCell(tblElem){ var trs=tblElem.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ var tds=trs.item(i).getElementsByTagName("td"); for(var j=0;j<tds.length;j++){ if(tds.item(j).getAttribute("colSpan")!=null){(1) var spanNum=tds.item(j).getAttribute("colSpan");(2) tds.item(j).removeAttribute("colSpan"); for(var k=0;k<spanNum-1;k++){ var tdNew=tds.item(j).cloneNode(false);(3) tdNew.innerHTML=tds.item(j).innerHTML;(4) trs.item(i).insertBefore(tdNew,tds.item(j+1)); } } if(tds.item(j).getAttribute("rowSpan")!=null){ var spanNum=tds.item(j).getAttribute("rowSpan"); tds.item(j).removeAttribute("rowSpan"); for(var k=1;k<spanNum;k++){ var tdNew=tds.item(j).cloneNode(false); tdNew.innerHTML=tds.item(j).innerHTML; var tds2=trs.item(i+k).getElementsByTagName("td"); trs.item(i+k).insertBefore(tdNew,tds2.item(j)); } } } } }
改善点
(1)hasAttributeメソッドが使えないため、getAttributeにて属性値の有無を判別
(2)"colSpan"でないと、属性値の削除や変更が行えないらしく、変更。rowSpanも同様です
(3)cloneNode(true)ではなぜかIEが落ち(IE8,IE9pp2で確認)、cloneNode(false)では落ちなかったため、やむなく採用。
当初はdocument.createElement("td")としましたが、属性値を漏らさずコピーするのが難しかったため、こうしています
(4)cloneNodeメソッドの引数としてfalseを与えたため、innerHTMLは手動で写しています
cloneNode(true)でブラウザが落ちるってのはなぜなんだろ!?IE9正式版リリースまでに直ってるといいなぁ