LoginSignup
18
25

More than 5 years have passed since last update.

jQuery テーブルで相対的にセルを取得するセレクタの書き方

Last updated at Posted at 2015-06-11

jQueryでテーブルを扱うときのサンプルです。

A1 B1 C1
A2 B2 C2
A3 B2 C3

※tdの親はtr、colspanやrowspanは無し、tdでイベントが発生した場合を想定して書いています。

隣のセルを取得したい

//左
$(this).prev();
//右
$(this).next();

サンプル(jsfiddle)

2つ隣のセルを取得したい

同じ親内の、自分の前後にあるtdをすべて取得し、インデックスでアクセスします。

//左
$(this).prevAll().eq(1);
//右
$(this).nextAll().eq(1);

サンプル

よって、自分からn番目右、あるいは左にあるセルを取得するには

//左
$(this).prevAll().eq(n-1);
//右
$(this).nextAll().eq(n-1);

とします。
でも右とか左とか条件分岐したくないなら

//n=-1なら左、n=0なら自身、n=1なら右
$("td",$(this).parent()).eq($(this).index()+n)

とすればよいでしょうか。
兄弟要素のtdをすべて取得して、インデックスでアクセスも可能ですが、その場合n=0が隣のセルとなるため、工夫が必要です

//この場合自身を含まない個数のtdが返るため、左隣はn=-1でアクセスできるが、n=0が右となりのセルとなってしまう。
$(this).siblings().eq($(this).index()+n)

上下のセルを取得したい

上記と同じようにprevAll,nextAllで行を指定し、自分のセルの列番号を指定します。

//n個上のセル
$("td",$(this).parent().prevAll(n)).eq($(this).index())
//下のセル
$("td",$(this).parent().nextAll(n)).eq($(this).index())

サンプル

まとめ

自分からかぞえてn行目、m列目のセルを取得する場合

$("tr",$(this).parents("table").eq(0)).eq($(this).parent().index()+n).find("td").eq($(this).index()+m)

サンプル

td内の要素からアクセスする場合は$(this)の部分を

$("hoge").parents("td").eq(0)

に置き換えればOK

もっと簡潔な方法ありましたらご教授ください。

18
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
25