- ベストアンサー
テーブル選択行の色づけについて
クリック時、オンマウス/アウト時のサンプルスクリプトは沢山見かけるのですが、それらが共存することは可能なのでしょうか？ クリックした場合は、それはそれで色付けを残しておき（勿論色づけされたところをもう一度クリックすれば色は消える）さらにオンマウス/アウト時にはクリック時のものとは関係なく色付けが行われる。 分かりにくい質問で大変恐縮なんですが、宜しくお願いします。
- briantaphy
- お礼率52% (25/48)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1のコードに手を加えたものです。 ようはonClickが動作したときはonMouseOutを無効化すればいいわけです。この例ではonflgというフラグ変数を用意して実現しています。 var bgc1 = "#ffffff"; var bgc2 = "#ccccff"; var bgc3 = "#ccffcc"; var bgc4 = "#ffcccc"; var onflg = 0; function mouseOver(obj){obj.style.backgroundColor = bgc2;} function mouseOut(obj){ if(onflg!=1){obj.style.backgroundColor = bgc1;} else{onflg=0;exit();}} function clkC(obj){onflg = 1; if(obj.style.backgroundColor!=bgc3) obj.style.backgroundColor = bgc3;else{obj.style.backgroundColor = bgc4;}}
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
こんな感じでどうでしょう、テーブルが複数在る場合は、class 指定して、script からは、className でスキップして下さい。 ---------------------------------------------------------------- <script type="text/javascript"><!-- window.onload=function(){ var TDs = document.getElementsByTagName('td'); var len = TDs.length; var clickColor = 'red'; for(var i=0;i<len;i++){ TDs[i].clickColor=''; TDs[i].onclick=function(){ this.clickColor=(this.clickColor=='')?clickColor:''; this.backgroundColor=this.clickColor; }; TDs[i].onmouseover=function(){ this.style.backgroundColor='cyan'; }; TDs[i].onmouseout=function(){ this.style.backgroundColor=this.clickColor; }; } }; //--> </script>
お礼
ご回答有難う御座います。残念ながらこの未熟者では解読に頭を傾げてしまいます。これから勉強する上で参考させていただきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script type="text/javascript"> var bgc1 = "#ffffff"; var bgc2 = "#ccccff"; var bgc3 = "#ccffcc"; var bgc4 = "#ffcccc"; function mouseOver(obj){obj.style.backgroundColor = bgc2;} function mouseOut(obj){obj.style.backgroundColor = bgc1;} function clkC(obj){if(obj.style.backgroundColor!=bgc3) obj.style.backgroundColor = bgc3;else{obj.style.backgroundColor = bgc4;}} </script> </head> <body> <table border=1> <tr> <td align="center" onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this)">dummy-line </td> </tr> </table> </body> </html>
補足
ありがとうございます。早速試してみましたが、クリック時の色付けがマウスアウトで消えてしまいます。やはり無理なのでしょうか？
お礼
ごめんなさい。↑補足質問ではないです。
補足
フラグですね！ちょっと考えればわかるのにお手数掛けました。 有難う御座います。