- ベストアンサー
セルの色を白くしたい。
いつもお世話になっています。 以前こちらでjavascriptでまとめてセルの色を変えたいとお聞きした際答えていただき、それを元に下記のようなものを作りました。 色を変えるところはできたのですが、一度ついた色が消えないため、これを白に戻したいのですがどのようにすればよいでしょうか？ 現状では、ボタンを押すとすべてクリアできれば満足ですが、いずれは細かく選択して白くしたいと思っています。 また、色を変える際、マウスオン、マウスアウトの際の追従がセルが多くなると遅延が発生してしまいますが、これを改善する方法はありますでしょうか？ 質問がわかりにくいかもしれませんがよろしくお願いします。 ＜現状のスクリプト＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <TITLE>スケジュールtest</TITLE> <STYLE> <!-- #colorchange{ border-collapse:collapse; } #colorchange td{ border:1px solid #000; width:20px; height:20px; background-color:#FFFFFF; } --> </STYLE> </HEAD> <BODY><SCRIPT> window.onload=function() { var t=document.getElementById("colorchange"); t.start=0; t.flg=false; var tds=t.getElementsByTagName("td"); var l=tds.length; var color=0; color = new Array(); var first=1; var selcolor="#ffc0c0"; var mousecolor="#ffc000"; var dbcolor="#ffff00" for(var i=0;i<l;i++) { tds[i].count=i; color[i]="#FFFFFF"; tds[i].onclick=function() { if(!t.flg) { t.start=this.count; } else { for(var j=0;j<l;j++) { if(first) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; color[j]=tds[j].style.backgroundColor; } else { tds[j].style.backgroundColor="#FFFFFF"; color[j]="#FFFFFF"; } } else { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; } else { tds[j].style.backgroundColor=color[j]; } color[j]=tds[j].style.backgroundColor; } } t.start=0; first = 0; } t.flg=t.flg?false:true; } tds[i].onmouseover=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { if(color[j] == selcolor) { tds[j].style.backgroundColor=dbcolor; } else { tds[j].style.backgroundColor=mousecolor } } } } tds[i].onmouseout=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { tds[j].style.backgroundColor=color[j]; } } } } </SCRIPT> <TABLE id="colorchange"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </BODY> </HTML>
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょ？ (1)selcolorをグローバル変数とする（window.onloadから追い出す） (2)セレクトボックスで選んだ色で塗りつぶすようにする <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <TITLE>スケジュールtest</TITLE> <STYLE> <!-- #colorchange{ border-collapse:collapse; } #colorchange td{ border:1px solid #000; width:20px; height:20px; background-color:#FFFFFF; } --> </STYLE> </HEAD> <BODY><SCRIPT> selcolor="#ffc0c0"; window.onload=function(){ var t=document.getElementById("colorchange"); t.start=0; t.flg=false; var tds=t.getElementsByTagName("td"); var l=tds.length; var color=0; color = new Array(); var first=1; var mousecolor="#ffc000"; var dbcolor="#ffff00" for(var i=0;i<l;i++) { tds[i].count=i; color[i]="#FFFFFF"; tds[i].onclick=function() { if(!t.flg) { t.start=this.count; } else { for(var j=0;j<l;j++) { if(first) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; color[j]=tds[j].style.backgroundColor; } else { tds[j].style.backgroundColor="#FFFFFF"; color[j]="#FFFFFF"; } } else { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { tds[j].style.backgroundColor=selcolor; } else { tds[j].style.backgroundColor=color[j]; } color[j]=tds[j].style.backgroundColor; } } t.start=0; first = 0; } t.flg=t.flg?false:true; } tds[i].onmouseover=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) { if(color[j] == selcolor) { tds[j].style.backgroundColor=dbcolor; } else { tds[j].style.backgroundColor=mousecolor } } } } tds[i].onmouseout=function() { if(!t.flg) return false; for(var j=0;j<l;j++) { tds[j].style.backgroundColor=color[j]; } } } } function changeColor(obj){ var color=obj.options[obj.selectedIndex].style.backgroundColor; obj.style.backgroundColor=color; selcolor=color; } </SCRIPT> <TABLE id="colorchange"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <form> <select style="background-color:#ffc0c0" onChange="changeColor(this)"> <option style="background-color:#ffc0c0">赤</option> <option style="background-color:#c0c0ff">青</option> <option style="background-color:#c0ffc0">緑</option> <option style="background-color:#ffffff">白</option> </select> </form> </BODY> </HTML>
その他の回答 (3)
- arexis
- ベストアンサー率66% (66/99)
FFoxでみたらエラーだらけだったので また訂正です。^^; 原文中 color と tds=t.getElementsByTagName("td"); のvarを取ってしまいます。 クリア用関数の方は <script type="text/javascript"> function ResetCel() { for(var i=0; i<tds.length; i++){ tds[i].style.backgroundColor = color[i] = '#FFFFFF'; } } </script> <input type="button" onclick="ResetCel()" value="クリア"> カラー配列も作り直しておかないとえらーだらけですね。
お礼
ご回答ありがとうございました。 希望のものが作成できました。 本当にありがとうございました。
- arexis
- ベストアンサー率66% (66/99)
#2 追記です。 記憶も消さないと復活してしまいますね。 原文スクリプト中 var color=0; を color=0; 追加のクリア用関数ResetCel中に color = new Array(); を追加。
- arexis
- ベストアンサー率66% (66/99)
とりあえず簡単なクリアボタン。 原文中スクリプト内 var tds=t.getElementsByTagName("td"); を tds=t.getElementsByTagName("td"); に。 原文中HTML文 テーブルが終わったら <script type="text/javascript"> function ResetCel() { for(var i=0; i<tds.length; i++){ tds[i].style.backgroundColor= ''; } } </script> <input type="button" onclick="ResetCel()" value="クリア"> スクリプトは当然原文中スクリプト内にいれてもOKです。 個別対応する時は、どういったきっかけ(イベント)で行うかで、このクリアの関数と合体させてしまえます。 遅くなる件に関しては確認できないので。
補足
遅くなる件ですがセルの数を100×10程度にするとわかります。 mouseover mouseoutの処理がもたついていると思いますが いろいろやってはみましたが直りません。 何かアドバイスがありましたらお願いします。
お礼
ご回答ありがとうございます。 思っていた以上のものとなっています。 javascriptでここまでできるものかと感心しています。 本当にありがとうございました。