jQueryでテーブルを扱うときのサンプルです。
A1 | B1 | C1 |
A2 | B2 | C2 |
A3 | B2 | C3 |
※tdの親はtr、colspanやrowspanは無し、tdでイベントが発生した場合を想定して書いています。
隣のセルを取得したい
//左
$(this).prev();
//右
$(this).next();
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
もっと簡潔な方法ありましたらご教授ください。