- 締切済み
チェックボックスにチェックがはいるとテーブルのセル背景色が変更する
javascriptはカスタマイズもままならないくらいの無知なのですが、検索してもどうしてもわからず、お教えいただけたらと思いご質問いたします。 題名の通り、項目にそれぞれチェックボックスまたはラジオボタンがあり、 チェックされると、そのテーブルの行（ｔｒ）の背景に色を付けたいのです。 （yahooメールやgmailのようなものです） 参考になりそうなものを検索しては見るのですが、どうしてもカスタマイズでつまづいてしまいます。 例えば、以下のページでは、変更する指定がidであったため出来ませんでした。 http://homepage2.nifty.com/godakaz/laboratory/background/bg3.html （同じ色を複数箇所で変更できるようなものがよいです） または、 http://javascript.style-mods.net/dhtml/dhtmltips_2-03.htm こちらのページはfirefox（win）で実現できていないようで。。 どのようにすればできるでしょうか？ どうぞどうか何卒よろしくお願い致します。
- gohan_gohan
- お礼率92% (233/251)
- JavaScript
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
みんなの回答
<html> <head><style> .red{background-color:#d00} .def{background-color:#ddf} </style></head> <body> a <table border="1"> <tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>abc</td> <tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>def</td> <tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>ghi</td> <tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>jkl</td> </table> <script> function setTR2(o,c){ obj = document.getElementsByName(o.name); for(i=0;i<obj.length;i++){parentSearch(obj[i],'TR').className='def';} setTR(o,c); } function setTR(o,c){parentSearch(o,'TR').className=o.checked?c:'def';} function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script> </body> </html>
- arexis
- ベストアンサー率66% (66/99)
<script type="text/javascript"> window.onload = function(){ document.getElementById('form1').reset(); } function ChgTR(e){ var el = e.target || e.srcElement; if(el.type == 'checkbox' || el.type == 'radio'){ function GetTR(tr){ while(tr.tagName != 'TR'){ tr = tr.parentNode; } return tr; } if(el.type == 'radio'){ var Names = document.getElementsByName(el.name); for(var i=0; i<Names.length; i++){ GetTR(Names[i]).style.backgroundColor = "#ffffff"; } //未選択色 } GetTR(el).style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; } } </script> <form id="form1"> <table onclick="ChgTR(event)"> <tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr> <tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr> <tr><td><input name="a1" type="radio"></td><td>cccccc</td><td>333333</td></tr> <tr><td><input name="a1" type="radio"></td><td>dddddd</td><td>444444</td></tr> <tr><td><input name="a2" type="radio"></td><td>eeeeee</td><td>555555</td></tr> <tr><td><input name="a2" type="radio"></td><td>ffffff</td><td>666666</td></tr> </table> </form> 寝るので(はやい^^；)、普通のラジオボタンと仮定して選択が移ってしまった所は元に戻すようにしたサンプルです。 それから、リロードされると背景色はデフォルトに戻ってしまいますが、フォームのチェックが残るブラウザ(Firefox)の事を考えて、 window.onload = function(){ } をつけてフォームをリセットするのもつけておきました。 フォームが複数ある場合は、同じパターンでフォームIDを指定して reset() させる記述を増やしてください。 document.getElementById('フォーム名').reset(); フォームのIDをつけるのが何らかの理由で困難な場合は、 『何個目か？』を取れるなら、その何個目(0から数える)を数字として document.forms[番号].reset(); としてください。 他のスクリプトでwindow.onload がある場合は、そこの中に記述。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞複数ヶ所で変更したい id指定ではなく、class名指定などにすればできますよ ※inoutなどにもclass名をつけたりしていてもっと良い使い方があると思うのであまり良いサンプルとは言えませんが・・・ <script type="text/javascript"><!-- //class名を指定する為の準備// document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } //色指定の準備// COLOR = new Array("#ffcc00","#0044ff"); //色変更// function ChgCol(n,i) { if(i.checked) { col = COLOR[n]; } else { col ="#ffffff"; } cName = "tr"+n; chName = "ch"+n; obj1= document.getElementsByClassName(cName); obj2= document.getElementsByClassName(chName); for(i=0;i<obj1.length;i++) { obj1[i].style.backgroundColor = col; } if(col == "#ffffff") { for(i=0;i<obj2.length;i++) { obj2[i].checked = false; } } } //--></script> </head> <body> <div> <form name="frm"> <table border="1"> <tr class="tr0"> <td> <input type="checkbox" class="ch0" onClick="ChgCol('0',this);"> </td> <td>青</td> <td>青りんご</td> </tr> <tr class="tr1"> <td> <input type="checkbox" class="ch1" onClick="ChgCol('1',this);"> </td> <td>赤</td> <td>赤とんぼ</td> </tr> <tr class="tr0"> <td> <input type="checkbox" class="ch0" onClick="ChgCol('0',this);"> </td> <td>緑</td> <td>冬みかん</td> </tr> </table> </form> </div> で、下のほうでFirefoxでできないのははdocument.allを使用しているからです <script type="text/javascript"><!-- function Click_Sub(i) { X = "x"+i; Y = "y"+i; if (document.getElementById(Y).checked==true) { document.getElementById(X).style.backgroundColor='#cccccc' } else { document.getElementById(X).style.backgroundColor='#ffffff' } } //--></script> <table border=1 width=100%> <tr id="x1"><td><input id="y1" type="checkbox" onclick="Click_Sub('1')">チェック<td>テキスト１ <tr id="x2"><td><input id="y2" type="checkbox" onclick="Click_Sub('2')">チェック<td>テキスト１ </table>
- arexis
- ベストアンサー率66% (66/99)
そのラジオボタンの動きについて 複数に同じnameがついていて、その中からの単一選択でチェックが移動する普通の使い方？ この場合、チェックが外れた所を元の色に戻す？ それともチェックボックスと同じ動きで、1個に1個のnameで、チェックが付いてる物をクリックすとチェックが外れるとか？ ラジオボタンはチェックボックスと動きが違うので、その辺の実際の目的の動作をかいてください^^；
- arexis
- ベストアンサー率66% (66/99)
<script> window.onload = function(){ document.getElementById('table1').onclick = function(e){ var el = window.event? event.srcElement : e.target; if(el.type != 'checkbox'){ return false; } var tr = el; while(tr){ if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; } tr = tr.parentNode; } } } </script> <table id="table1"> <tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr> <tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr> <tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr> <tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr> </table> window.onload を他に使っていて書換えが難しいなら onlick イベントハンドラを テーブルタグに書く方法↓で。 <script> function ChgTR(e){ var el = e.target || e.srcElement; if(el.type != 'checkbox'){ return false; } var tr = el; while(tr){ if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; } tr = tr.parentNode; } } </script> <table id="table1" onclick="ChgTR(event)"> <tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr> <tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr> <tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr> <tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr> </table> どちらのサンプルもテーブルのIDは table1。 色の部分は自分で好きなように変更。
<html> <head><style> .red{background-color:#d00} .def{background-color:#ddf} </style></head> <body> <table border="1"> <tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>abc</td> <tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>def</td> <tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>hgi</td> </table> <script> function setTR(c){ eob = event.srcElement; obj = parentSearch(eob,'TR'); obj.className=(eob.checked)?c:'def'; } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script> </body> </html>
お礼
ご回答大変ありがとうございました！ IE6（win）では動いたのですが、firefox（win）で出来ないようでした。。 出来ればfirefoxでも見られる方がいいです。
関連するQ&A
- 背景色の変更を簡単に
<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
- Javascript? チェックボックスにチェックをいれると・・
Yahooメールのように、チェックボックスにチェックをいれると その行（<tr>タグ）に色がつくようなJavascriptを探しています。 よろしくお願いします。
- ベストアンサー
- HTML
- 時間帯によってclass名を変更したい
時間帯毎に特定のボックス内の背景色を変更したいのですが、 スタイルシートで色を設定しておいて、html内のclassの値を変更するやり方を教えて下さい。 ※スタイルシートで3種類の色を設定 .bg1 {background-color: #000000;} .bg2 {background-color: #ff0000;} .bg3 {background-color: #ffffff;} ※時間帯は3種類 朝（7～10時）＝class="bg1" 昼（10～18時） ＝class="bg2" 夜（18～翌7時）＝class="bg3" ※html内のボックスのクラス名を時間帯によって class="bg1" class="bg2" class="bg3" のように変更したい。 <div class="○○">このBOX内の色を時間帯毎に変更したい</div> 私はjavascriptの知識はなく、ヒント等から自分で書くことはできないので、 恐縮ですが具体的なソースをお願いできればありがたいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- HPで時間ごとに背景を変えたい
HPの設定で、時間ごとに背景を変えたいと思ってます。 そこで検索してみたところこんなソース↓を発見したのですが、一日に三回変えられるものでした。これを四回にしたいのですが、上手く書き換えられません。どこを直せばよいでしょうか？ <script language="JavaScript"> <!--// bg1=0; bg2=12; bg3=20; jikoku=new Date(); jikan=jikoku.getHours(); if(jikan>=bg1&&jikan<bg2) document.write('<body background="img/1.jpg">'); else if(jikan>=bg2&&jikan<bg3) document.write('<body background="img/2.jpg">'); else document.write('<body background="img/3.jpg">'); //--> </script>
- 締切済み
- その他（インターネット・Webサービス）
- テーブルの背景色を複数変更する
テーブルにて、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
- アイフレームからトップページの背景画像を変更
検索したものをいくつか試してみましたが、 いずれも上手くいかなかったので質問させてください。 トップページ(index.html)に埋め込まれているアイフレームから トップページの背景画像を変更したいです。 ----------------------------------------------------------------- <script type="text/javascript"> <!-- function bgChange(myback){ top.document.body.background=myback; } //--> </script> <span onClick="javascript:bgChange('img.jpg');return false">背景を変更する</span> ----------------------------------------------------------------- それと、親ページを指定する単語は『top』で合っていますでしょうか…？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- テーブル内のチェックボックスを、全て選択、全て解除 したい
以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript"> <!-- var count; function BoxChecked(check){ for(count = 0; count < document.form1.array[].length; count++){ document.form1.array[][count].checked = check; } } //--> </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.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
- Firefoxでテーブルの背景画像が表示されない
下記のようにテーブルに背景画像を表示させたいのですが、 なぜかFirefoxだけ背景画像が表示されません。(WindowsXP,Firefoxは最新版(1.5.0.7)です) IE,OPERA(ともに最新版)では表示されます。 いろいろと検索したのですが同様の相談は見つからず、自分が根本的にミスをしているのだと思いますが、どうしていいのかわからずに相談した次第です。 .tab{width:502px;margin-bottom:20px;} .01{background:url(img/title.gif) top no-repeat;width:502px;height:32px;padding:0px 0px 4px 20px;} .02{background:url(img/com_top.gif); width:502px;height:10px;} .03{background:url(img/com_middle.gif); width:502px;padding:5px 20px 5px 20px;} .04{background:url(img/com_bottom.gif); width:502px;height:10px;} <table cellpadding="0" cellspacing="0" class="tab"> <tr><td class="01">タイトル</td></tr> <tr><td class="02"></td></tr><tr><td class="03"> サンプルテキストサンプルテキストサンプルテキスト </td></tr><tr><td class="04"></td></tr></table> http://www.isonly.net/~second_blue/n/ ↑実際のページです。 汚いHTMLで申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。
- ベストアンサー
- ブラウザ
- 日時によって変化する背景
webページの際、通常背景の色や画像を表すとき、bodyタグのbgcolorやbackgroundで表しますが、これを時間ごとや日ごと、月ごとといった節目ごとに切り替えるようにしたいのですが、そういう手法はどうすればいいのでしょうか？ javascriptですると思うのですが、javascriptのことはよく判りませんので、どなたか教えてください。 webページということで、カテゴリーをHTMLにしました。 回答、よろしくお願いします。
- ベストアンサー
- HTML
お礼
ご回答大変ありがとうございます！ 大項目によってテーブルが複数あるので、テーブルにIDを指定することが出来なかったので、下のサンプルで出来ました！ しかしながら…実は、「チェックボックス」と「ラジオボタン」が混在していまして、どちらもチェックされた項目のセル背景を変更したいでのです。。 スクリプトのcheckboxをradioに変えてもだめなようです。。 どうしたらよいでしょうか…