広告

2014年10月19日日曜日

jQueryでTABLE内のラジオボタン選択行の背景色を変更するサンプル

最近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を並べて対応しています。

もっとスマートな方法もあるかもしれませんが、参考になれば。



Ads by 忍者AdMax