dポイントプレゼントキャンペーン実施中!

テーブルの1番左にラジオボタンを置き、
それがクリックされたらその行のセル全部色を変え、
別のラジオボタンが押されたら元のセルの色は戻してその行は色が変わる。
こういったものは実現可能なのでしょうか?

A 回答 (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>
    • good
    • 0
この回答へのお礼

お返事遅くなりました。すいません…
<body onload>でスクリプト動かすのですね。
すっかりonClickで考えていたので。かなり参考になります。
わかりやすくサンプルまで書いてくださって・・・
本当にありがとうございました。

お礼日時:2005/12/12 09:46

ラジオボタンをクリックしたときのイベントを取得して、クリックされたラジオボタンによってスタイルシートを変えてみてはどうですか?

    • good
    • 0
この回答へのお礼

お返事遅くなりました…すいません。
そうですね。そういう考え方でいいですね。
やってみます。ありがとうございます。

お礼日時:2005/12/12 09:39

>実現可能なのでしょうか?


できると思います

この回答への補足

書き忘れましたが、やり方もわからないので教えてください。
よろしくお願いします。

補足日時:2005/12/09 15:01
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!