最近jQueryを使う機会があり勉強中です。
本記事では、選択行の背景色を変えるjQueryのコードについてメモしておきます。
ソースコード例はこんな感じ。
var $radioButton= $("input[name='aaaa']");
$radioButton.click(function(){
$radioButton.parents('table').find('td').css('background', 'white');
$("input[name='aaaa']:checked").parent().parent().children().css('background', 'blue');
});
基本的にはラジオボタンがクリックされると、まずテーブル全体のセルの背景色を塗りつぶして、変更前の行の色を元に戻してから、新たに選択された行の色を変更するというロジックです。
悩んだのがラジオボタンが存在するテーブルやテーブル列全体の背景色を変更する方法でした。単純にTABLEタグやTRタグの背景色を変更するだけでは上手くいかず、上記処理のようにTDタグ全体を取得したり、選択行についてはparentとchildrenを並べて対応しています。
もっとスマートな方法もあるかもしれませんが、参考になれば。
