表の一部のセルの背景色を変更したい

Question

いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で表中の任意のセルの背景色を変更するにはどのようにすればよいのでしょうか。 --------------------------------------- --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。ご回答をよろしくお願いいたします。

the845t · Accepted Answer

１．<form>は必要無い。
２．<body>のonLoadも要らない。

IE限定でやる気なら咎めませんが、<td>のonClickはあまり有効的ではないと思いますよ（一応）


<script language="JavaScript">

</script>
<table>
<tr>
<td id="td1" onClick="ChgBg('td1','black')">hoge......</td></tr>
<tr>
<td id="td2" onClick="ChgBg('td2','red')">foo.......</td></tr>
<tr>
<td id="td3" onClick="ChgBg('td3','yellow')">bar.......</td></tr>
</table>

initじゃなく、ChgBgって関数にしてます。
適時変更してみてください。

lead1976 · Answer

先の方の回答と重なる部分もありますが…

スクリプトの側から任意のセルの背景色を変更する場合、まずはその対象となるセルに固有のIDをふっておいて、それを辿って背景色を変更する処理を記述するのが良いと思います。 こちらの場合、formなどは使わなくてもすみます。

document.getElementById(***).style.backgroundColor="hoge";

と言う記述をJavaScriptの文中に入れることで、特定のID「***」を持つセルの背景色をhoge色にすることができます。
なお、これはDOMを利用した記述になり、古いブラウザではエラーメッセージをだすことがあるので、それを防止する意味で、

if (document.getElemenetById){～～～}

というif文の中で先述の処理を記述するのが望ましいと思います。

各セルに対してID名をふるのが困難、あるいは面倒な場合は、同じくDOMを使った方法になりますが、DOMではHTMLファイル中の各要素を配列としてソートして持っているという特性を使って、「TD」要素の配列を利用し、その番号によって要素を特定すると言う方法もあります。

if(document.getElementsByTagName){
 document.getElementsByTagName("TD")[x].style.backgroundColor="hoge";
}

こう記述すると、そのHTMLファイルの中の(x+1)番目のセルの背景色をhoge色にすることができます。 このとき、配列の連番は0から開始されるので、1番目(一番初め)のセルを指定する場合の配列の番号は0になることに注意してください。 こちらの場合は、HTMLファイル中のセルの数・連番を管理できれば、body以下のテーブルのソースを書き換えなくても、特定のセルを指定することができます。

とりあえず、IE6での動作を重視してアドバイスしてみました。 他にも同様の処理をさせる記述方法はあるかもしれません。

あと、最後になんですが、ページを読み込まれたときに背景色を調整しておきたいと言う場合は、スクリプトを通じて背景色を操作するよりも、直接CSSで背景を定義したほうが早いかもしれません。 特定のセルにだけ特定の背景色をつけたいと言う場合は、IDやclassなどのセレクタをうまく使えばよいと思います。 スクリプトを使う必要性がさほど高くないケースでは、スタイルシートで定義してしまったほうが楽かもしれませんね。

参考になれば…

表の一部のセルの背景色を変更したい

１．<form>は必要無い。

先の方の回答と重なる部分もありますが…

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

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

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