電子書籍の厳選無料作品が豊富！

クリックするとそのセル一行（列ではない）の背景色が変わる。

解決済

  • 質問者：pekolet
  • 質問日時：
  • 回答数：4件

タイトルに書いたJavaScriptを探しているのですが見つけることができません。
今から学ぼうにも時間的な都合で間に合わないので、皆さんのお力を貸していただければ、と思っています。
なお、
・違う行のセルをクリックするとそこの色が変わり、前回クリックしたところは元の色に戻る
という機能も欲しいと思っています。
どうかよろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

> ピンクだった背景色が青になったりしています



書いてもらったtableには背景（ピンク？青？？）の指定がなかったけど、セル毎に背景色を指定しているのでしょうか？
<td bgcolor="#xxxxxx"> みたいに。

だとしたらヘッダ部の<script ～></script>を次のものと差し替えて試してみてください。
#これでダメならtable全体をみてみないとわからないかも。

なお、テーブルのネストは問題ないはずです。

<script type="text/javascript">
<!--
function TT_color_set(oR,SetColor){
for(var i=0;i<oR.cells.length;i++) {
oR.cells[i].style.backgroundColor = SetColor;
}
}
function TT_click(oR) {
var oT = oR.parentNode.parentNode;
if(oT.targetRec == oR) {
TT_color_set(oR,'')
oT.targetRec = false;
} else {
if(oT.targetRec)TT_color_set(oT.targetRec,'');
TT_color_set(oR,oT.currentBackgroundColor);
oT.targetRec = oR;
}
}
function TT(Tid,SetColor) {
var oT = document.getElementById(Tid);
if(! oT)return;

for(var i=0;i<oT.rows.length;i++) {
oT.rows[i].onclick=function(){TT_click(this);};
}
oT.targetRec=false;
oT.currentBackgroundColor=SetColor;
}
//-->
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にありがとうございます！steel_grayさんのスクリプトも試させて頂いて、正常に動作を確認できました！

実は先ほどの問題はCSSと、他のJavaScriptでの色指定（テキストや背景色）が原因でした。早くご報告したかったのですがお礼と補足が出来なかったため…遅くなってしまい申し訳ありません（T■T;）

今回は本当に助かりました！ありがとうございました！！m(_ _)m

通報する
お礼日時：2005/01/28 14:26

No.3

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

>選択したセル1つのみしか背景色が変更されず…


私の環境（ＸＰ＋ＩＥ６）では、行で色が変わるのですが…
環境はなんですか？

この回答への補足

Σ　そうなのですか？！勉強不足の為おかしな発言をしてしまい申し訳ありません。
環境は（2000＋IE6）です。(>_<)

補足日時：2005/01/28 13:15
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

も、申し訳ないです！！私のやり方が間違ってました！
<TR>タグに書き込まなければいけないのに<TD>タグに書き込んでいました…
貴重なお時間を割いていただいたのにこんなミスで本当に申し訳ありません！(>_<;)
無事正常な動作を確認できました！！

通報する
お礼日時：2005/01/28 13:38

No.2

  • 回答者： steel_gray
  • 回答日時：

サンプルです。



ヘッダ部の<script～ >～</script>をそのままコピー。
tableにIDを付ける。
</table>の後ろ～</script>までをコピー。
※tableに付けたIDとクリックした時の色を記述

元のテーブルへの色指定の仕方によってはうまく動作しないことも。その時はどんなテーブルにしたのか（色指定がわかるように）を教えてください。

<html>
<head>
<title>table</title>

<script type="text/javascript">
<!--
function TT_click(oR) {
var oT = oR.parentNode.parentNode;
if(oT.targetRec == oR) {
oR.style.backgroundColor = '';
oT.targetRec = false;
} else {
if(oT.targetRec)oT.targetRec.style.backgroundColor = '';
oR.style.backgroundColor = oT.currentBackgroundColor;
oT.targetRec = oR;
}
}
function TT(Tid,SetColor) {
var oT = document.getElementById(Tid);
if(! oT)return;

for(var i=0;i<oT.rows.length;i++) {
oT.rows[i].onclick=function(){TT_click(this);};
}
oT.targetRec=false;
oT.currentBackgroundColor=SetColor;
}
//-->
</script>

</head>
<body>


<table id="T1" border>
<tr><td>hoge</td><td>hoge</td></tr>
<tr><td>hoge</td><td>hoge</td></tr>
<tr><td>hoge</td><td>hoge</td></tr>
</table>
<script type="text/javascript">
<!--
TT('T1','#ffcccc');// テーブルのIDとクリックした時の色
//-->
</script>


</body>
</html>

この回答への補足

>ちゃんと動作しています、と書きましたが、ピンクだった背景色が青になったりしています;;

補足日時：2005/01/28 13:19
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

初めまして、steel_grayさん。
まさに求めていたJavaScriptで大変嬉しく思っています。
早速試させて頂いて、サンプルだけで作成したものは正常に動作したのですが、いざ自分のものに組み込むと何の変化もありません；；
そこでテーブルのネストやボーダーの色指定、他のJavaScriptの噛み合わせ？がマズイのかとか思い、サンプルで作成したものに組み込んで試してみたのですがそっちではちゃんと動作しています。
タグとしては、
<table id="T1" border cellpadding=2 width=200 cellspacing=0 bordercolor="#E5F5FA" bordercolordark="#E5F5FA" bordercolorlight="#666666">
です。
ちょっと自分では他に原因が思いつかず、もう少しお付き合い頂いてもよろしいでしょうか(>_<;)

通報する
お礼日時：2005/01/28 13:15

No.1

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

<script type="text/javascript">


<!--
var oldRow;
function setBGCOLOR(r){
if(oldRow!=null)oldRow.style.backgroundColor="#FFF";//WHITE
oldRow=r;
r.style.backgroundColor="#3FF";//薄いBLUE
}
//-->
</script>
…
<TR onclick="setBGCOLOR(this)">
    • good
    • 0
    • 件
通報する
この回答へのお礼

初めまして、BLUEPIXYさん。
早速試させて頂いたのですが、選択したセル1つのみしか背景色が変更されず…私の説明が悪かったようで申し訳ありません。
今回は、選択したセルが存在する行全ての背景色を変更したいと考えております。

教えていただいたソ－スを自分で改造する、というのが出来ればいいのですが…JavaScriptに関してはサンプルをコピペする程度の知識しかありませんので;;
申し訳ありません。迅速な回答をどうもありがとうございました。

通報する
お礼日時：2005/01/28 13:00

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

Q質問する（無料）

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

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

おすすめ情報

Q質問する（無料）

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

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

おすすめ情報