• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:クリックするとテーブルの列の背景色が変わる/元に戻る)

クリックしてテーブルの列の背景色を変える方法

このQ&Aのポイント
  • テーブルの列の背景色を変える方法について紹介します。
  • クリックしたセルとその列に依存するセルの背景色を変更する方法を説明します。
  • サンプルコードに基づいて、列ごとに背景色を変更する方法を具体的に解説します。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.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">&nbsp;</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>

goo6
質問者

お礼

ご回答ありがとうございます。 getElementByIdを用いての複数idの参照の仕方がわからず、document.allを使用しておりましたが、 このような別の視点からの解答があるのですね。<colgroup>というものを知りませんでした。 期待通りの動作です。ありがたく使用させていただきます。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

ちょっと修正してみました。 こんな感じでどうでしょうか? <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>

goo6
質問者

お礼

上記別解に加え、私の作ったものの修正版までご提示いただきありがとうございます。 大変勉強になります。今回は上記の別解を利用させていただきたいと思います。 ありがとうございました。