jQueryのラジオボタン操作系サンプル探してます

質問

jQueryをペチペチと勉強していますが、ちょっと詰まってしまいました。
以下のような動作をするサンプルプログラムを探しています。

「ラジオボタンを押下すると、それに対応するテーブルのtr要素の背景色を変更する。」

==========ソースここから==========

<table border ="1">
<tr id ="0" class ="table_1">
<td>hoge1</td><td>hoge1</td><td>hoge1</td>
</tr>
<tr id ="1" class ="table_1">
<td>hoge2</td><td>hoge2</td><td>hoge2</td>
</tr>
<tr id ="2" class ="table_1">
<td>hoge3</td><td>hoge3</td><td>hoge3</td>
</tr>
</table>

<table border ="1">
<tr>
<td><input type ="radio" name ="radio_hoge" value ="100" id ="0" class ="radio_1"></td><td>hoge1</td>
</tr>
<tr>
<td><input type ="radio" name ="radio_hoge" value ="200" id ="1" class ="radio_1"></td><td>hoge2</td>
</tr>
<tr>
<td><input type ="radio" name ="radio_hoge" value ="300" id ="2" class ="radio_1"></td><td>hoge3</td>
</tr>

==========ソースここまで==========

HTMLの構成はこんな感じにしてあります。

下側のテーブル内のラジオボタンを押下すると、上側のテーブルのtrの背景色を変更したいのですが、指定の方法が分からず悩んでいます。
（trとradioは、同一「id」値と対応する。ものとしたい。

現状、他に実現してある内容は

・tr行にマウスオーバーすると、trの色を変える
・tr行をクリックすると、trの色を変えて保持する
・tr行をクリックすると、対応するラジオボタンを選択する

です。
コレに、

・ラジオボタンを選択すると、対応するtr行の色を変える

を追加したく思っています。
当面の問題は、tr(のid？)に対して「this」以外で指定を行う方法が分からない。
ということかと思っています。
コレ(trに対してthis以外で指定)が分かれば、もう一つやろうとしてる、tr行でクリックした以外のtr行の色を初期色に戻す。
あたりも解決すると思っているので、ご存じの方がいましたら、教えていただけると助かりますm(_ _)m

以下は、現状実現してある内容～の参考にしたサイトです。

>>・tr行にマウスオーバーすると、trの色を変える
http://1bit.mobi/20120313111043.html

>>・tr行をクリックすると、trの色を変えて保持する
http://ponk.jp/jquery/basic/state_save
の「４」番目

>>・tr行をクリックすると、対応するラジオボタンを選択する
http://www.tohoho-web.com/lng/199912/99120188.htm

よろしくお願いします。

回答No.1

LancerVII · ベストアンサー

こんにちは。

jQueryの場合いろいろな要素のセレクト方法があるのでこれだ！という回答が難しいのですが、
まずidは同一HTML内で一意でなければいけません。

id="tr-0"とid="rd-0"とかにしないとダメです。
id="0"を2つ使用することは出来ません。

ほかの動きをどのように実装しているかわからないのですが、radioを選択して番号を取得して対応するtrの背景色を変えるなら以下のような感じだと思います。

$('table input:radio').click ( function() {
// idはrd-0,rd-1,rd-2・・という感じなので'-'で分割して配列の1番目に番号が入る
var id = $(this).attr('id').split('-')[1];
$('#tr-'+id).css ({
backgroundColor: '#fcc'
});
});

他にもradioと対応する行の並びが同じであれば選択されたradioのindexと同じindexのtrの色を変更するとかいろいろ方法はあります。

お礼

こんばんは！
お礼が遅れましてすみません。

できましたっ！！！
感謝感激です！

>>$('#tr-'+id).css ({

「#」か。。。なるほど。
んー。ホント、勉強しないと、日々ついていけなくなります＠ｗ＠（笑

>>まずidは同一HTML内で一意でなければいけません。

コレを直しつつ、IE上では期待通りの動きをしてくれるものの実装にこぎつけました。（他ブラウザは、とりあえず考えなくていい状況なので。。。

<script type="text/javascript">
<!--
var last_click_id = -1;

$(function(){

//trをクリックしたら
$('tr.table_1').click(function(){
var n = parseInt($(this).attr('id').split('_')[1]);
document.F1.planDay[n].checked = true;

if(last_click_id >= 0){
//初回以外のクリック
$('#tr_' + last_click_id).removeClass('hv_2');
$(this).addClass('hv_2');
last_click_id = n;
}else{
//初回クリック
$(this).addClass('hv_2');
last_click_id = n;
}
});

//ラジオボタンをクリックしたら
$('input[name="planDay"]:radio').click(function(){
var n = $(this).attr('id').split('_')[1];

if(last_click_id >= 0){
//初回以外のクリック
$('#tr_' + last_click_id).removeClass('hv_2');
$('#tr_' + n).addClass('hv_2');
last_click_id = n;
}else{
//初回クリック
$('#tr_' + n).addClass('hv_2');
last_click_id = n;
}
});

//テーブル要素のtr要素をマウスオーバーしたら
$('tr.table_1').hover(function(){
//hoverクラス「hv」を追加する
$(this).addClass('hv');
},function(){
//マウスアウトしたら
//hoverクラス「hv」を削除する
$(this).removeClass('hv');
});

});
//-->
</script>

<style>
tr.table_1.hv{
background-color: #66aa00;
cursor: pointer;
}
tr.table_1.hv_2{
background-color: #ffaa55;
cursor: pointer;
}

</style>

あーだこーだやった結果、いろんなとこのサンプルソースをくっつけたので、なーんか書き方に統一感は無いですが、今後の課題ということで＠ｗ＠（笑

trをクリックした際の、ラジオボタンとの連動～の所だけ、他の部分と毛並みが違うので、そこだけもうちょっと調べつつ、キレイに出来るところはして、完成！になりそうです。

助かりました。
取り急ぎ（え？
お礼までに。ありがとうございましたm(_ _)m