このサイトを参考に以下のサンプルを作りました。
「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」
この例でいくと、
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>
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"></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>
ご回答ありがとうございます。
getElementByIdを用いての複数idの参照の仕方がわからず、document.allを使用しておりましたが、
このような別の視点からの解答があるのですね。<colgroup>というものを知りませんでした。
期待通りの動作です。ありがたく使用させていただきます。
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>
上記別解に加え、私の作ったものの修正版までご提示いただきありがとうございます。
大変勉強になります。今回は上記の別解を利用させていただきたいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
背景色を透明化
-
createElementが一瞬で消えてし...
-
HTML id名とjavascript変数名
-
クリックするとテーブルの列の...
-
取得した要素がインライン要素...
-
getElementByIdの戻り値がnull...
-
前回の質問の続き
-
画像の表示位置
-
ポップアップのソースの書き方...
-
JimdoでWebアイコンフォントの...
-
Gifアニメ、最後のコマに行った...
-
デフォルト非表示にしたい。【t...
-
window.openで値の渡し方を教え...
-
jspでcssが読み込めない
-
日替わりで画像を変更したい
-
error LNK2019 未解決のシンボ...
-
スライダーを実装した場合、ペ...
-
リキッドデザイン3カラム左端幅...
-
複数の画像を先に読み込ませ表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報