jQuery: クリックされたテーブルのセルの値を取得する

テーブルのセルがクリックされた時に、そのセルの値を取得したい場合があります。 その場合の処理をjQueryを使って記述します。

まず次のサンプル用のテーブルとテキストボックスを用意します。

data1data2data3
data4data5data6
テーブルとテキストボックスのHTML 

<p><input id="input" type="text" value="" size="10"></p>

<table id="sample" border="1">
<tr><td>data1</td><td>data2</td><td>data3</td></tr>
<tr><td>data4</td><td>data5</td><td>data6</td></tr>
</table>

クリックされたセルの値を取得

テーブルのセルをクリックしてみてください。 セルの値が上のボックスに表示されます。

data1data2data3
data4data5data6
jQueryのコードを下に表示します。 "#sample1 td"と指定するのがポイントです。 
テーブルのid="sample1"
テキストボックスのid="input1"

<script>

$("#sample1 td").on("click",function(){
	var td_now = $(this).text();
	$("#input1").val(td_now);
})

</script>

次（右隣）のセルの値を取得

クリックされたセルの次（右隣）のセルの値も取得できます。

data1data2data3
data4data5data6

この場合はnext()を使用します。ソースは次の通りです。

テーブルのid="sample2"
テキストボックスのid="input2-1", id="input2-2"

<script>

$("#sample2 td").on("click",function(){
	var td_now = $(this).text();
	var td_next = $(this).next().text(); // 次のセル（右隣）
	
	$("#input2-1").val(td_now);
	$("#input2-2").val(td_next);
	
})

</script>

前（左隣）のセルの値を取得

クリックされたセルの前（左隣）のセルの値も取得できます。
左のボックスがクリックされたセルの値、右のボックスが前のセルの値です。

data1data2data3
data4data5data6

この場合はprev()を使用します。
「pre()」ではなく、「prev()」です。vをお忘れなく。 

テーブルのid="sample3"
テキストボックスのid="input3-1", id="input3-2"

<script>

$("#sample3 td").on("click",function(){
	var td_now = $(this).text();
	var td_pre = $(this).prev().text(); // 前のセル（左隣）
	
	$("#input3-1").val(td_now);
	$("#input3-2").val(td_pre);
	
})

</script>

隣の隣（次の次）の値は取得できる？

両隣の値が取得できることはわかりましたが、隣の隣（次の次）はどうでしょう。
クリックしてみてください。

data1data2data3
data4data5data6

きれいな書き方かどうかは別として、next()をつなげると取得できます。 pre()をつなげると前の前の値を取得できます。
あくまで１つのやり方として参考までに。

テーブルのid="sample4"
テキストボックスのid="input4-1", id="input4-2"

<script>

$("#sample4 td").on("click",function(){
	var td_now = $(this).text();
	var td_next = $(this).next().next().text(); // 次の次
	
	$("#input4-1").val(td_now);
	$("#input4-2").val(td_next);
	
})

</script>
jQuery入門