jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

Tableで親・子・兄弟要素を取得

今はWeb関連のプログラミングにはjavascriptが欠かせないと思います。 そしてまたコードが簡便になるjQueryも必須と言っていいのではないでしょうか。
javascriptを書きながらマニュアル本やサイトでよく調べるのが親・子・兄弟要素を取得する方法でした。
そこで、すぐ探せるようにメモっておくことにしました。
下のテーブルをサンプルにします。

社員番号社員名年齢性別
22345宮本武蔵31男性
12468おつう22女性
32589佐々木小次郎29男性
19524本位田又八31男性
68521沢庵宗彭65男性
68521お杉おばば51女性


<table id="sampleTable">
<tr><th>社員番号</th><th>社員名</th><th>年齢</th><th>性別</th></tr>
<tr><td>22345</td><td>宮本武蔵</td><td>31</td><td>男性</td></tr>
<tr><td>12468</td><td>おつう</td><td>22</td><td>女性</td></tr>
<tr><td>32589</td><td>佐々木小次郎</td><td>29</td><td>男性</td></tr>
<tr><td>19524</td><td>本位田又八</td><td>31</td><td>男性</td></tr>
<tr><td>68521</td><td>沢庵宗彭</td><td>65</td><td>男性</td></tr>
<tr><td>73524</td><td>お杉おばば</td><td>51</td><td>女性</td></tr>
</table>

trのいろいろな値を得る

trをクリックしていろいろな値を得てみます。 

$("#sampleTable tr").on("click", function(){
	// クリックしたtrのインデックス
	var idx = $(this).index();

	// その直前の兄弟（兄）のインデックス
	var idxPrev = $(this).prev().index();
	
	// その直後の兄弟（弟）のインデックス
	var idxNext = $(this).next().index();
	
	// trの数
	var trLen = $(this).siblings().length + 1; // siblingsは自分を含まない兄弟
	var trLen2 = $(this).parent().children().length;
	
	// 子供tdの数
	var tdLen = $(this).children().length;
	
	// 兄trの数
	var trPrevLen = $(this).prevAll().length;
	
	// 弟trの数
	var trNextLen = $(this).nextAll().length;
	
	// 子供であるtdの二番目の値
	var tdStr = $(this).children().eq(1).text();
	
	// 最初のtrの３番目のtdの値(first()はeq(0)と同じ)
	var tdStr2 = $("#sampleTable tr").first().children().eq(2).text();
		
	// 最後のtrの４番目のtdの値(last()はeq(-1)と同じ)
	var tdStr3 = $("#sampleTable tr").last().children().eq(3).text();
		
	alert(
			"クリックしたtrのインデックス：" + idx + "\n" +
			"その直前の兄弟のインデックス：" + idxPrev + "\n" +
			"その直後の兄弟のインデックス：" + idxNext + "\n" +
			"trの数_方法1：" + trLen + "\n" +
			"trの数_方法2：" + trLen2 + "\n" +
			"子供tdの数：" + tdLen + "\n" +
			"兄trの数：" + trPrevLen + "\n" +
			"弟trの数：" + trNextLen + "\n" +
			"子供であるtdの2番目の値：" + tdStr + "\n"
			"最初のtrの３番目のtdの値：" + tdStr2 + "\n"
			"最後のtrの４番目のtdの値：" + tdStr3 + "\n"
			);

 // 直前、直後が無い場合、インデックスは-1を返します。
 // eq()にマイナスのインデックスを指定したときは後からの位置となります。
});

これらを応用してtdの内容などを得ることができます。

本位田又八の行をクリックした場合は次の結果がアラートされます。

クリックしたtrのインデックス：4
その直前の兄弟のインデックス：3
その直後の兄弟のインデックス：5
trの数_方法1：7
trの数_方法2：7
子供tdの数：4
兄trの数：4
弟trの数：2
子供であるtdの2番目の値：本位田又八
最初のtrの３番目のtdの値：年齢
最後のtrの４番目のtdの値：女性

最初のtrは項目行ですので、その３番目のtdの値は「年齢」となります。