【jquery】テーブルの列の値を一覧で取得

こんなテーブルがあったとして、A、B、Cといった列をクリックした際、その列の値を全て取得する。

　　 　　 　　 　　 　　 　　

A	B	C
1	2	3
4	5	6

html

<table id="tab">
　　<thead>
  　　<tr>
    　　<th>A</th>
    　　<th>B</th>
    　　<th>C</th>
  　　</tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

javascript

//列のthのクリックイベントを拾う
$("#tab th").click(function(){
  var temp ="";

　　//列番号を取得
  var col_no = $("#tab th").index(this);

　　//1行目を抜いた行数の分だけloopする
  for(var i=1; i < ($("#tab tbody").children().length + 1); i++){

　　　 //i行目の、指定列(col_no)のtdの値を取得する
    temp += $("#tab tr:eq(" + i + ") td:eq(" + col_no + ")" ).text() + " ";
  }
  alert(temp);
});

A列をクリックした場合、「1 4」
B列をクリックした場合、「2 5」
C列をクリックした場合、「3 6」

と表示される。Google Chartとかへ渡してグラフで使う予定。

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート