読者です 読者をやめる 読者になる 読者になる

"Diary" インターネットさんへの恩返し

いつもソースコードコピペばかりなので,みなさまへ少しばかりの恩返しを

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



スポンサーリンク

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

                 
ABC
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テクニカルノート

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