- ベストアンサー
表の一部のセルの背景色を変更したい
いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。 以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で 表中の任意のセルの背景色を変更するにはどのように すればよいのでしょうか。 --------------------------------------- <HTML> <HEAD> <script language="JavaScript"> <!-- function init(){ //------ここでで各セルの背景色を変更したいのです。 } --> </script> </HEAD> <BODY onload="init(); "> <FORM name="tttt"> <TABLE border="1" > <TBODY> <TR> <TD onClick="this.style.backgroundColor = 'black';">test</TD> <TD onClick="this.style.backgroundColor = 'red';">test</TD> <TD onClick="this.style.backgroundColor = 'yellow';">test</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML> --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。 ご回答をよろしくお願いいたします。
- o_w_nakazaki
- お礼率76% (90/117)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
１．<form>は必要無い。 ２．<body>のonLoadも要らない。 IE限定でやる気なら咎めませんが、<td>のonClickはあまり有効的ではないと思いますよ（一応） <script language="JavaScript"> <!-- function ChgBg(id,color){ if(document.getElementById){ document.getElementById(id).style.background = color; } } // --> </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って関数にしてます。 適時変更してみてください。
その他の回答 (1)
先の方の回答と重なる部分もありますが… スクリプトの側から任意のセルの背景色を変更する場合、まずはその対象となるセルに固有の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などのセレクタをうまく使えばよいと思います。 スクリプトを使う必要性がさほど高くないケースでは、スタイルシートで定義してしまったほうが楽かもしれませんね。 参考になれば…
