- ベストアンサー
表の一部のセルの背景色を変更したい
いつもお世話になっております。 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などのセレクタをうまく使えばよいと思います。 スクリプトを使う必要性がさほど高くないケースでは、スタイルシートで定義してしまったほうが楽かもしれませんね。 参考になれば…
関連するQ&A
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- セルの色＞何が足りないのでしょうか？
こんにちは。 下記のようなテストを作っています。３択式で実際は５～１５問なのでもう少し大きな表です。そこで教えていただきたいことがあります。 下の設定ですと、問(2)へ行くと問(1)で選択した回答の色が消えてしまいます。 どうしたらそのまま残しておけるのでしょうか？ 初心者ですので、出来ましたら丁寧なご回答をお願いいたします。（ＸＰ、ＩＥ６） <html> <head> <script language="JavaScript"><!-- var col; //選択しス色 var old_obj = null;//1つ前に選択した色を記憶しておく変数 function ActiveColor(obj){ //色がクリックされた時 if(old_obj != null){ //1つ前に選択した色の周りに表示されているグレー色を消す old_obj.style.backgroundColor = ""; } //選択した色の周りにグレー色を付ける obj.style.backgroundColor = "darkgray"; col = obj.style.color;//選択された色を保存 old_obj = obj; //現在の選択色を、1つ前として格納 //色をクリックした時にBgChange()関数が実行されないように //イベント階層の浮上(bubble up)をキャンセルする window.event.cancelBubble = true; } //--></script> </head> <body onclick="BgChange();"> <table border=1> <tr> <td>(1)</td> <td style="color:black" onclick="ActiveColor(this);">No.1</td> <td style="color:black" onclick="ActiveColor(this);">No.2</td> <td style="color:black" onclick="ActiveColor(this);">No.3</td> </td> <tr> <td>(2)</td> <td style="color:black" onclick="ActiveColor(this);">No.4</td> <td style="color:black" onclick="ActiveColor(this);">No.5</td> <td style="color:black" onclick="ActiveColor(this);">No.6</td> </tr> </table> </body> </html>
- ベストアンサー
- レンタルサーバ・ASP
- firefoxで表の表示切替操作の異常
以下のコードはIE ver.7では正常に作動しますが、firefoxで表示/非表示を繰り返すとおかしくなり表がどんどん広がっていきます。 どこが間違っているのでしょうか。 firefoxでも正常に作動する方法をよろしくご教示お願いします。 ================================================= <html><head> <script language="javascript"><!-- [CDATA[ window.onload = function(){ var body = document.getElementById("body"); var toggle = document.getElementById("toggle"); toggle.onclick = function(){ if (body.style.display == "none") { body.style.display = "block"; } else { body.style.display = "none"; } return false; } } //]] --></script><noscript></noscript> </head><body> <table border="1" ><tbody> <tr><td>[<a href="#" id="toggle">表示切替</a>]</td></tr> <tr id="body"><td>こんにちわ</td></tr> </tbody> </table> </body></html> =================================================
- ベストアンサー
- JavaScript
- 順番にセルの背景色をつけたい
javascriptを使って セルの背景色一定の時間で順番に変える方法を調べています。 ボタンをクリックすると □□□□ ↓ ■□□□ ↓ □■□□ ↓ □□■□ ↓ □□□■ と変化するようなものを作成したいと考えております。 下記のソースでalertを出すと実現できるのですが、 alertをコメントアウトするとうまくいきません。 以上の点、アドバイス等お願いします。 <html> <head> <title></title> <script type="text/javascript"> function changeColor(){ var targetTable = document.getElementById('colorchange'); var targetTr = targetTable.rows[0]; var tdLen = targetTr.cells.length; for(var i = 0 ; i < tdLen ; i++ ){ if( i==0 ){ targetTr.cells[0].style.backgroundColor='red'; }else{ targetTr.cells[i-1].style.backgroundColor='white'; targetTr.cells[i].style.backgroundColor='red'; } wait( 300 ); //このalertを消すとうまくいかない alert('test'); } } function wait( timeWait ) { var timeStart = new Date().getTime(); var timeNow = new Date().getTime(); while( timeNow < (timeStart + timeWait ) ) { timeNow = new Date().getTime(); } } </script> </head> <body> <table border="1" id="colorchange"> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> <button onClick="changeColor()">スタート</button> </body> </html>
- ベストアンサー
- JavaScript
- htmlの表を調整したい
以下のようなコードの時、「c」がはみ出てしまいます。 訳あってrowspanは外せませんが、「2」と「b」を重ねて表示したいです。 どの様にしたらよいでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <table border=""> <tbody> <tr> <td> 1 </td> <td rowspan="2"> 2 </td> <td> 3 </td> </tr> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- 背景色の変更を簡単に
<script type="text/javascript"> <!-- function change(bg_color){ document.bgColor = bg_color; } //--> </script> ************ <table> <tr> <td onclick="change('#FFFFEE')" style="background-color: #FFFFEE">クリーム</td> <td onclick="change('#EEFFFF')" style="background-color: #EEFFFF">水色</td> <td onclick="change('#FFEEFF')" style="background-color: #FFEEFF">桃色</td> <td>～～</td> </tr> </table> ************ javascript初心者です。テストでなんとか動くようになりました・・・ これで間違いないでしょうか？ これで正しければ onclick="change('#～～～')"の記述を全カ所にこれから入れようと思うのですが、 onclick="change('#～～～')"の部分を記述しないで、 style="background-color: #～～～">のstyleの色名＃～～～を引っ張り込む方法とか、統一する方法とか簡素化する方法はありますか？ 例えば<td style="background-color: #FFFFEE">クリーム</td> HTMLはこのままでできないでしょうか？ ここで教えて頂いた以下の画像の場合は出来たので同じように出来れば嬉しいのですが・・・ <script type="text/javascript"> function change(evt) { e = evt.target || evt.srcElement; if (e.nodeName=='IMG') document.body.style.backgroundImage = 'url(' + e.src +')'; } </script> <table onclick="change(event)"> <tr> <td><img src="a001.jpg"></td> <td><img src="a002.jpg"></td> <td><img src="a003.jpg"></td> </tr> </table> *********************** なかなか応用ができなくて困っています。 なんとか簡単にできれば嬉しいです<(_ _)>
- ベストアンサー
- JavaScript
- テーブルリンクで別ウインドウで開くようにするには？
<table> <tr> <td onClick="window.location.href='a.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> このようにしてオンマウスでTD内の色を変え、TD全体でリンクさせる時、別ウインドウで開くにはどうしたらよいですか？ それとも、テーブルリンクで別ウインドウで開く指定は出来ないんでしょうか？ <table> <tr> <td onClick="window.location.href='a.html' XXXXX" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> XXXXXの部分にtarget='_blank'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。 よろしくお願いします。
- 締切済み
- HTML
- formのtextの文字色を変えたい
JavaScriptで１page目で指定したパラメータを2page目で別のフォーム内のtextボックスに記入する際、他にも作るテキストボックスと違う文字色にしたいのですが、方法が判りません。そもそもそんなことできないのでしょうか？ ------- 1page目 ------- <html> <head> <title>別ページのフォームにパラメータを送る</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5" width="80"> <tbody><tr> <td align="center"> <input type="button" onClick="location.href='form2.html?No.001'" value="セット"></td> <td align="center"> <input value="閉じる" onClick="window.close()" type="button"> </td> </tr> </tbody> </table> </body> </html> ----- 2page目 ----- <html> <head> <title>別ページからのパラメータをフォームに書き込む</title> <script language="JavaScript"> <!-- function pdata() { para= location.search; para = para.substr(1,6); document.myform.number.value=para; } //--> </script> </head> <body onLoad="pdata()"> <table border="1" cellpadding="2" cellspacing="2" width="150"> <tbody> <form name="myform" method="post"> <TR> <TD >番 号</TD> <TD ><input name="number" type="text" id="番号" size="15" /></TD> </TR> </form> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでクリックするごとにセルの色を変えたい
javascript初心者です。 現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。 現在下記のように作っていますがエラーが起きてしまいます。 どのように直せばよいかご教授願います。 <script type="text/javascript"> <!-- var color1 = "#ff0000"; var color2 = "#0000ff"; function onC(obj){ if (obj.style.backgroundColor = color1){ obj.style.backgroundColor = color2; } else if (obj.style.backgroundColor = color2){ obj.style.backgroundColor = color1; } } //--> </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
