javascriptでクリックするごとにセルの色を変えたい

解決済

質問者：iec1128
質問日時：2007/11/18 22:04
回答数：5件

javascript初心者です。
現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。

現在下記のように作っていますがエラーが起きてしまいます。
どのように直せばよいかご教授願います。

<script type="text/javascript">

</script>
<body>
<table border="1" cellpadding=20>
<tr>
<td onClick = "onC(this)"><br>
</td>
</tr>
</table>
</body>

通報する

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

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： steel_gray
回答日時：2007/11/19 04:08

styleのbackgroundColorは

<td style="background-color:～">
みたいな記述がなければ
"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)

標準的なブラウザならgetComputedStyle、IEならcurrentStyleで結果的にどう設定されているかを読み出す事はできるけど、ちょっと面倒なのでここではパス。

とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。

というわけで以下サンプル。
<html>
<head>
<title></title>
<style type="text/css">
td{background-color:#0000ff}
</style>
<script type="text/javascript">
function bgSwap(TD) {
if(TD.style && TD.style.backgroundColor)
TD.style.backgroundColor = '';
else
TD.style.backgroundColor = '#ff0000';
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="bgSwap(this)">セル１</td>
<td onclick="bgSwap(this)">セル２</td>
</tr>
</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

>>styleのbackgroundColorは
>><td style="background-color:～">
>>みたいな記述がなければ
>>"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
>>(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)

backgroundColorは特に記述がなければ初期値は＃FFFFFFとなると思っていました。

>>とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
>>ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。

とてもわかりやすく説明していただき、参考になりました。
サンプルを参考に自分なりにカスタマイズしていきたいと思います。
今回はありがとうございました。

通報する

お礼日時：2007/11/19 21:59

No.5

回答者： redfox63
回答日時：2007/11/20 00:16

Stack OverFlowですか … 実行環境を示し無いなったほうが良いかも

当方の WIｎXP+IE6の環境ではエラーになりませんでしたので …

- 0
- 件

通報する

No.3

回答者： gura_
回答日時：2007/11/19 00:16

　例えば、このようにします。

↓
<html>
<head>
<title>セルの背景色を変更する</title>
<script type="text/javascript">

</script>
</head>
<body>
<p>セルの上でマウスをクリックして下さい</p>
<table border="1">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

icを用いて比較の対象をはっきりさせているという
解釈でよろしかったでしょうか。

window.onload=function()以降が理解しきれないのですが
今後のために理解できるよう
javascriptの勉強をしていきたいと思います。

今回はよいサンプルをありがとうございました。

通報する

お礼日時：2007/11/19 22:06

No.2

回答者： redfox63
回答日時：2007/11/18 22:32

初期値として何も設定されていない場合比較部分を修正しても変化がありません

if ( obj.style.backgroundColor == color1 ) {
　　obj.style.backgroundColor = color2;
} else {
　　obj.style.backgroundColor = color1;
}
といった具合に判断したほうが良いでしょう