【jQuery】テーブルの何番目の行がhoverされているかを取得する

今回はHTMLでコーディングされたテーブル（表）のうち、カーソルが乗っている行が何番目なのかを取得する方法を紹介する。

jQueryを使って行番号を取得する

jQueryのhoverメソッドを使う方法がシンプルだ。

以下のコードのうち3行目がポイント。

$(function(){ 
  $('.table tbody tr').hover(function(){ 
    var idx = $('.table tbody tr').index(this) + 1; 
    $('#output').text(idx);
  }); 
}); 

indexメソッドは、オブジェクト内（今回の場合.table tbody tr）で、引数に指定した要素のインデックス番号を返すメソッドだ。

ここで返される番号は0から始まる番号であることに注意。

今回は分かりやすく、選択された行番号をページ上に表示するようにしているので、あえて行番号が1から始まるように調整している。

以下にサンプルを掲載するので、テーブルにカーソルを合わせて動作を確認してもらいたい。

See the Pen jquery-get-selected-row by Sakamoto Kousuke (@suckamon) on CodePen.

選択された行番号がページ上に反映されるはずだ。