アプリ版：「スタンプのみでお礼する」機能のリリースについて

クリックするとテーブルの列の背景色が変わる／元に戻る

解決済

  • 質問者：goo6
  • 質問日時：
  • 回答数：2件

このサイトを参考に以下のサンプルを作りました。
「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」
この例でいくと、
1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。
2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる
という動きを実現したいです。

2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。

現時点のサンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テーブルの列の背景色を変える</title>
<SCRIPT language="JavaScript">
<!--
function bgcolor(idName){
for ( i=0 ; i < document.all.item(idName).length ; i++ ) {
document.all.item(idName, i).style.backgroundColor = "#EE3300";
}
}
//-->
</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">
<TR>
<TD width="30">行1</TD>
<TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD>
<TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD>
<TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD>
</TR>
</TABLE>
<TABLE border="1">
<TR>
<TD width="30">行2</TD>
<TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD>
<TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD>
<TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD>
</TR>
</TABLE>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

別のやり方


<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>
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2005/02/21 06:12

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

ちょっと修正してみました。


こんな感じでどうでしょうか？
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2005/02/21 06:14

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報