- ベストアンサー
クリックしてテーブルの列の背景色を変える方法
- テーブルの列の背景色を変える方法について紹介します。
- クリックしたセルとその列に依存するセルの背景色を変更する方法を説明します。
- サンプルコードに基づいて、列ごとに背景色を変更する方法を具体的に解説します。
- goo6
- お礼率100% (3/3)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
別のやり方 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT type="text/javascript"> <!-- var idOld="O"; function bgcolor(idName){ document.getElementById(idOld).style.backgroundColor ="#FFF"; document.getElementById(idName).style.backgroundColor="#E30"; idOld=idName; } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <colgroup id="O"></colgroup> <colgroup id="A"></colgroup> <colgroup id="B"></colgroup> <colgroup id="C"></colgroup> <TR> <TD width="30">行1</TD> <TD width="30" onclick="bgcolor('A')">A1</TD> <TD width="30" onclick="bgcolor('B')">B1</TD> <TD width="30" onclick="bgcolor('C')">C1</TD> </TR> <TR> <TD width="30">行2</TD> <TD width="30" onclick="bgcolor('A')">A2</TD> <TD width="30" onclick="bgcolor('B')">B2</TD> <TD width="30" onclick="bgcolor('C')">C2</TD> </TR> </TABLE> </body> </html>
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ちょっと修正してみました。 こんな感じでどうでしょうか？ <SCRIPT language="JavaScript"> <!-- var idOld; function bgcolorSet(idName,color){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = color; } } function bgcolor(idName){ bgcolorSet(idOld,"#FFF"); bgcolorSet(idName,"#EE3300"); idOld=idName; } //--> </SCRIPT>
お礼
上記別解に加え、私の作ったものの修正版までご提示いただきありがとうございます。 大変勉強になります。今回は上記の別解を利用させていただきたいと思います。 ありがとうございました。
お礼
ご回答ありがとうございます。 getElementByIdを用いての複数idの参照の仕方がわからず、document.allを使用しておりましたが、 このような別の視点からの解答があるのですね。<colgroup>というものを知りませんでした。 期待通りの動作です。ありがたく使用させていただきます。