- ベストアンサー
ラジオボタンとセルの連動
テーブルの1番左にラジオボタンを置き、 それがクリックされたらその行のセル全部色を変え、 別のラジオボタンが押されたら元のセルの色は戻してその行は色が変わる。 こういったものは実現可能なのでしょうか？
- noqpon
- お礼率33% (2/6)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
具体的なサンプル。 <html> <head> <title>なんかのサンプル</title> <script type="text/javascript"> <!-- function Tfunc1(Tid,Marker){ var T = document.getElementById(Tid); if(! T) return; T.Tfunc_Marker = Marker; var Rows = T.tBodies[0].rows; for(var i=0;i<Rows.length;i++) { var Input = Rows[i].cells[0].getElementsByTagName('input')[0]; Input.onclick = function(){Tfunc1_onchange(this)}; if(Input.checked) { T.TfuncValue=Rows[i]; Rows[i].className = T.Tfunc_Marker; } } } function Tfunc1_onchange(O) { var TR = O.parentNode.parentNode; var T = TR.parentNode.parentNode; if(T.TfuncValue)T.TfuncValue.className = ''; TR.className = T.Tfunc_Marker; T.TfuncValue = TR; } //--> </script> <style type="text/css"> <!-- tr{background-color:#ccc;color:#000;} tr.makerA {background-color:#f00;color:#fff;} tr.makerB td{background-color:#00f;color:#fff;} --> </style> </head> <body onload="Tfunc1('T1','makerA');Tfunc1('Table2','makerB');"> <table id="T1"> <caption>テーブル#1</caption> <tr><th><input type="radio" name="radio1" value="a"></th><td>aaaaaaaaaaa</td></tr> <tr><th><input type="radio" name="radio1" value="b"></th><td>bbbbbbbbb</td></tr> <tr><th><input type="radio" name="radio1" value="c"></th><td>cccccccccccccc</td></tr> </table> <table id="Table2"> <caption>テーブル#2</caption> <tr><th><input type="radio" name="radio2" value="a"></th><td>11111</td><td>111</td></tr> <tr><th><input type="radio" name="radio2" value="b" checked></th><td>22</td><td>22222</td></tr> <tr><th><input type="radio" name="radio2" value="c"></th><td>33333</td><td>3</td></tr> </table> </body> </html>
お礼
お返事遅くなりました。すいません… <body onload>でスクリプト動かすのですね。 すっかりonClickで考えていたので。かなり参考になります。 わかりやすくサンプルまで書いてくださって・・・ 本当にありがとうございました。