jQueryでクリックされたテーブルの行・セルの情報を取得する

HTMLテーブルのセルがクリックされた際、クリックされた行の情報をjQueryで得る方法。
例として以下のテーブルを想定し、td要素をクリックすると起動されるイベントハンドラを定義する。

<!-- HTML -->
<table id=tblPlanSpot1>
  <tr>
    <td>A</td>
    <td id="a">AA</td>
    <td>AAA</td>
  </tr>
  <tr>
    <td>B</td>
    <td>BB</td>
    <td>BBB</td>
  </tr>
</table>

// JavaScript
//  イベントハンドラ
$('#tblPlanSpot1 td').live('click',function(){
  var $cur_td = $(this)[0]; // (1):セルのHTML表現 [0]をつける点に留意のこと。  
  var $cur_tr = $(this).parent()[0]; // (2):行のHTML表現
  //
  // $cur_tr = $(this).closest('tr')[0]; // このほうが確実
}

ここでセルAA(ハイライトされた行)をクリックすると、$cur_td, $cur_trにはそれぞれ次の値がセットされる。

  $cur_td = "<td id="a">AA</td>"
  $cur_tr = "<tr><td>A</td><td id="a">AA</td><td>AAA</td></tr>"

これらはオブジェクトになっているので、いろいろなプロパティにアクセス可能。

  $cur_td.id // "a"がセットされる。(<td id="a"> のid値)
  $cur_td.rowIndex // 1がセットされる(上から数えたテーブルの行番号)
  $cur_td.closest('tr').children('td:eq(1)') // 同じ行の2番目のセル

その他いろいろなメソッドが用意されている。

• children([exp]) 子要素（孫要素以降は対象外）
• next([exp]) 次の要素（弟要素）
• nextAll([exp]) すべての弟要素
• parent([exp]) 親要素
• parents([exp]) 先祖要素
• prev([exp]) 前の要素（兄要素）
• prevAll([exp]) すべての兄要素
• siblings([exp]) すべての兄弟要素

パラメータexpには要素セレクタ式を指定する(例：parent(‘td’))。省略すると、最初に合致する要素が得られる。