- ベストアンサー
javascript クリックすると、あるテーブルのセルの色を複数個所変化させたい
ある、場所をクリックすると、 あるテーブルのセルの背景色が変わるというものを作っています。 特定の場所を変化させるには”all()”を使うと知り javascript には、ある場所をクリックすると document.all('td01').style.backgroundColor='#44EE77'; というような処理をさせることにしました。 すると <td id="td01"></td> と記述した部分はちゃんと色が変わったのですが、 複数のセルの色を変える必要がある部分があり 複数にわたって <td id="td01"></td> <td id="td01"></td> というようにtd01を指定すると、やはりエラーが起こりました。 その後、いろいろ調べてみたのですが、 最初に書いたような背景色を変化させる処理を 複数個所に渡って指定するという方法が分かりません。 どうすれば、複数個所の色を変えることができるのでしょうか？
- yuzuru0024
- お礼率86% (557/646)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- OKbokuzyo
- ベストアンサー率43% (130/296)
id属性値は一意にしなければなりません。 document.all()は特定のブラウザでは動作しません。 使うならdocument.getElementById()を使用するべきです。 やり方は色々ありますし、実装方法は必要とする要件にもよりますが、 簡単な例を挙げれば、Tableにidをつけて辿る方法などがあります。 <table id="table01"> <tr> <td></td> <td></td> </tr> </table> var tblObj = document.getElementById("table01"); var tdList = tblObj.getElementsByTagName("TD"); for (var i = 0, intSize = tdList.length(); i < intSize; i++ ) { tdList[i].style.backgroundColor = '#44EE77'; } しかし、本来style属性はcssに記述し、class属性を設定することが一般的です。 なおかつ、class属性はid属性と違って重複して指定できる（当前ですが）ので、 質問者様の詰まった問題も同時に解消できます。 --- css --- td.Normal {background-color: #FFFFFF} td.chgColor{background-color: #44EE77} --- html --- <table> <tr> <td class="Normal"></td> <td class="Normal"></td> </tr> </table> --- javascript --- var tdList = document.getElementsByTagName("TD"); for (var i = 0, intSize = tdList.length(); i < intSize; i++ ) { if (tdList[i].className == "Normal") tdList[i].className = chgColor; } } 注意：時間が無かったのですべて未検証です
お礼
回答ありがとうございます。
- neko-ten
- ベストアンサー率55% (1287/2335)
IDが重複しているのでエラーが出ています。 複数の要素に、同一のID割り振りができないのです・・・。 今回の場合、それぞれの要素には別のID割り振りをしなければいけないので、簡単に言うと document.all('指定するID').style.backgroundColor='#44EE77'; を、背景を変更したいすべての要素に対して行うことになります。 そのまま行うと同じ構文をたくさん書くことになるので、再帰処理を使うと楽かもしれません。 変更したいセルのIDを配列に格納します。 cells = new Array("td1","td3","td5"); ←背景変更したいセルのIDを羅列 for(var i in cells){ document.all.item(cells[i]).style.backgroundColor="#44EE77"; } このスクリプトで一応動作確認できました。 お試しいただければ幸いです。
お礼
回答ありがとうございます。
関連するQ&A
- 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
- JavaScriptのテーブルの背景色を保存させたい
とある下記のフリーソースからJavaScriptにてテーブルの背景色を変えるのを作ったのですが、複数の人とページを共有したいので色を変更後、保存させておきたいです。 <script language="JavaScript"> function my_bgcolor(dore) { if(document.all)document.all("lay0").style.backgroundColor=dore; } function cell1(dore) { if(document.all)document.all("lay1").style.backgroundColor=dore; } //--> </script> ※テーブルに色を指定するソースは以下のものです <td id="lay0" style="position: relative; visibility: visible"> どこかへSubmitして、外部ファイルへ保存しないといけないと思うので、上の動作ができるCGIのなにかよい案、似たようなソースをご存知の方がいましたら教えてください。
- 締切済み
- CGI
- クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 ３箇所全てに記述しなければならないのでしょうか？ テーブルのブロックが少なければ、これでもいいのですが、 たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか？ ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>
- ベストアンサー
- JavaScript
- phpMyAdminみたいに、テーブルのセルの色を変えたりしたい
お世話になります。 phpMyAdminのテーブルみたいに、セルの一部にカーソルが乗ると背景色を緑色に変更し、離れると元の色に戻り、セルの一部でクリックすると、特定のチェックボックスにチェックが入り、かつ背景色をオレンジ色に固定するやり方を探しています。（チェックが入ると、マウスが乗っても、離れても、チェックがはずれるまではオレンジ色のまま） phpMyAdminは一行全てが色が変わりますが、現在考えているのは、 <form id="form" action="hoge.php" method="post" name="form"> <table width="500" border="1" cellspacing="2" cellpadding="0"> <tr> <td bgcolor="#dee3e7"><input type="checkbox" name="del_1" value="1" />削除１</td> <td bgcolor="#dee3e7">ファイル１</td> <td bgcolor="#dee3e7"><input type="checkbox" name="del_2" value="1" />削除２</td> <td bgcolor="#dee3e7">ファイル２</td> </tr> </table> </form> のように、一行にセルが４つあります。 左二つのどちらかにマウスが乗ると左二つの色を変え、クリックすると、左側のチェックボックスにチェックが入り、色を固定する。 同様に右側２つのセルにカーソルが乗れば色を変え、離れれば元の色に戻る。表の一部をクリックするとチェックボックスにチェックが入り、色が固定される・・・ このようなページを作りたいので、是非、お力をかして頂けないでしょうか。よろしくお願い致します。
- ベストアンサー
- JavaScript
- テーブルの背景色を複数変更する
テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid； // cn：色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ１</td> <td>ここ２</td> </tr> <tr> <td>ここ３</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ４</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- tableの各セルに同じ関数を対応させたい
いつもお世話になっております。 今回はテーブルの各セルに同じ関数を対応させたいのですがいい方法が思い浮かばなかったので、そこをお聞きしたいです。 function swap(TD) { if(TD.style && TD.style.backgroundColor) { TD.style.backgroundColor = ''; } else { TD.style.backgroundColor = '#ff0000'; } } (略) <TD onclick="swap(this)"><INPUT type="hidden" name="xxx01" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx02" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx03" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx04" value="0"></TD> swapという関数はセルの色を白と赤に交互に変えるものですが、ここにセルが白なら0を、赤なら1を各テキストに入れるという処理を加えたいです。 しかしながらnameがちょっと違うので一つ一つ関数を作らなくてはいけないのかと思っています。 nameのxxxの部分は共通で、お尻の数字が変わっていきます。 この規則性を使って何とかうまい方法はありませんでしょうか？ ご教授お願いします。
- ベストアンサー
- JavaScript
- tableセルに色を付ける
tableセルに色を付けます。 で、行で指定しようとtrタグにbgcolorをいれました。 ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> <td>あ</td> </tr> <tr> <td>い</td> </tr> <tr bgcolor="red"> <td>２</td> <td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- クリック後、TABLEの幾つかのセルの色を変える
初めて質問させて頂きます。 現在ホームページを作成しています。 フレームでページを2分割して、片方がメニューバーのようなページでもう一つがメインページのような構成です。 こんな感じです。 <FRAMESET rows="20%,80%"> <FRAME name="top" src="menu.htm"> <FRAME name="bottom" src="top.htm"> <NOFRAMES> <BODY> <P>Please access this page by browser that supports the frame. </P> </BODY> </NOFRAMES> </FRAMESET> そしてmenu.htmにテーブでコンテンツを表示し、もう片方にTOP、PROFILE、BBS、DIARYとテーブルで仕切ってページを作成しています。 <TABLE border="1" bgcolor="gray"> <TBODY> <TR> <TD bgcolor="red"><A href="top.htm" target="bottom">TOP</A></TD> <TD><A href="profile.htm" target="bottom">PROFILE</A></TD> <TD><A href="bbs.htm" target="bottom">BBS</A></TD> <TD><A href="diary.htm" target="bottom">DIARY</A></TD> </TR> </TBODY> </TABLE> このとき、最初は"TOP"のセルがが赤くなっています。 ここでリンクとなっている"BBS"をクリックすると、そのセルの背景がredになり、その他のセルの背景はgrayのままで、次にDIARYをクリックするとDIARYのセルの背景がredになり、BBSはgrayになるというような事をやりたいのですが、良い方法はあるでしょうか？ ちなみにサーバの容量が非常に少ないので画像を使いたくないのですが、画像を使わざるを得ないでしょうか？ このカテゴリーで質問する内容では無いかもしれませんが、どなたか良いアドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- テーブルのセルのクリック時、セル内の文字を太くするには
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字（この場合、id='text1'のセル）の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか？ それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか？ 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。