[jQuery] tableの内容を取得する

jQueryでtableの内容を取得する方法いろいろ。

全セルを2次元配列化

var data = [];
var tr = $("table tr");//全行を取得
for( var i=0,l=tr.length;i<l;i++ ){
	var cells = tr.eq(i).children();//1行目から順にth、td問わず列を取得
	for( var j=0,m=cells.length;j<m;j++ ){
		if( typeof data[i] == "undefined" )
			data[i] = [];
		data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得
	}
}

テーブル内の全セルを二次元配列にする場合は上記のコードで取得できる。2行目で行を配列化。その配列内のセルを4行目で列ごとにもう一度配列化し、データ保持用の変数dataに代入している。

2行目の$("table tr")を$("table tbody tr")とすればtbody内のセルだけを、$("table thead tr")とすればヘッダーのセルだけを取得できる。

colspanやrowspanでセルが結合されている場合

この場合も前述の全セルのニ次元配列化と同じロジックで取得できる。ただし、セルの番地が単純な順番となっていないのでその点に注意。

こういうインデックスになる。

つまり、ある行のn列目の値を得たいと思った時、その前にrowspanやcolspanで拡張されたセルがある場合、列番がずれているのでそれに対応した処理を行わねばならない。

セルがtdかthかを知りたい

上記の例ではそのセルのタグが<th>か<td>か区別していない。

判別したければ内側のfor文内に以下のif文を書く。

if( cells.eq(j).is("th") )//th
if( cells.eq(j).is("td") )//td

colspan、rowspanの値を知るには

内側のfor文内でcells.eq(j).attr("colspan")でcolspanの値を得られる。rowspanならcells.eq(j).attr("rowspan")。

colspan、rowspanとも設定されていない場合はundefinedとなる。