管理人Kのひとりごと

デジモノレビューやプログラミングや写真など

トップ > PC > colspan,rowspanをJavaScriptで分割

colspan,rowspanをJavaScriptで分割

PC JavaScript

割と最近まで

でのセルの結合方法を知りませんでした。colspanで列数を、rowspanで行数を指定して結合するんですね。 けど、表内のデータを取得する際、セルが分かれてるほうがいいじゃないですか。"table　rowspan　分割"とググっても、そういった方法は出てこず...ならば作ろう!と思い、書いてみました。以下ヘタクソース

function catCell(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).hasAttribute("colspan")){
　　　var spanNum=tds.item(j).getAttribute("colspan");
　　　tds.item(j).removeAttribute("colspan");
　　　for(var k=0;k<spanNum-1;k++){
	var tdNew=tds.item(j).cloneNode(true);
	trs.item(i).insertBefore(tdNew,tds.item(j+1));
　　　}
　　}
　　if(tds.item(j).hasAttribute("rowspan")){
　　　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(true);
	var tds2=trs.item(i+k).getElementsByTagName("td");
	trs.item(i+k).insertBefore(tdNew,tds2.item(j));
　　　}
　　}
　}
　}
}

行を分割する場合、下の行を操作しなきゃいけないので、先に列の分割をやっとります。要素を任意の位置に挿入するinsertBeforeメソッドって初めて使いました。なんだか変数名にセンスないなぁ。

  • 追記:hasAttributeメソッドはIEでは未対応らしく、IEでは動かないようです。Fx3.6,Chrome7,Safari5ではそれっぽく動きました。お試しの際は自己責任でよろしくお願いいたします...

セルの分割を考えたきっかけは、Android用のtv/ラジオの番組表アプリ作成を思いついたからなんです(もちろん既にそういったアプリはあるんですが...) 昔はRSSで1日分の番組表を提供するサービスがありましたが、現在はその時間帯のものしかRSSで配信しておらず、任意の時間の番組を取得するにはHTMLをパースする必要がありまして。大概はtableを使ってるんですが、セルが結合されてることが多くて。1時間単位でデータをまとめていくには、やっぱりセルが分割されてるほうがいいと思ったわけです。...JavaScriptではなくてJavaで書いたほうが後々都合がよかったか