- ベストアンサー
選択行だけ色を変更する場合のCSSの書き方
以下のHTMLで、どうすれば、選択行だけ青に変更できるでしょうか？ <table> <tr> <td class="lc"> <input type="button" value="色変更" onClick="選択行だけ青に変えたい"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> <tr> <td class="lc"> <input type="button" value="色変更" onClick="選択行だけ青に変えたい"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> </table>
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 CSSに関しては#3様が回答済みなので… ＞１．ユーザがチェックBOXを選択した行だけ色を変更したい ＞２．ユーザがマウスカーソルをあてた行だけ色を変更したい ↑だけでは、やりたいことがよくわかりませんが、おもいっきり勝手な 想像で雰囲気のみのサンプルを （#5様が既に同様のものを御提示済みですが、まぁ、感じが違うの で一応ご参考までに。 あとは適当にいじってください。） tableの外側に余白があればmouseoutは設定しなくてもいけるけれど、直接ウィンドウ外に出てしまえるようだと消し損ねるので、おまけで設定しています。 <html> <head><title>test</title> <style type="text/css"> table.sample { border-collapse:collapse; } table.sample thead td { border-bottom:2px groove #EEE; } table.sample td { width:4em; text-align:center; } table.sample tr.checked td { color:red; font-weight:bold;} table.sample tr.hover td { background-color:#DDC; } </style> <body> <table class="sample"> <thead><tr> <td>色変更</td><td>項目1</td><td>項目2</td> <td>項目3</td><td>項目4</td> </tr></thead> <tbody> <tr><td><input type="checkbox" name="color"></td> <td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td> </tr> <tr><td><input type="checkbox" name="color"></td> <td>2-1</td><td>2-2</td><td>3-3</td><td>2-4</td> </tr> <tr><td><input type="checkbox" name="color"></td> <td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td> </tr> <tr><td><input type="checkbox" name="color"></td> <td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td> </tr> <tr><td><input type="checkbox" name="color"></td> <td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td> </tr> </tbody> </table> <script type="text/javascript"> (function() { var i=0, tt, t = document.getElementsByTagName('TABLE'); while (tt = t[i++]) if (tt.className == 'sample') { addEvent(tt, 'click', test); addEvent(tt, 'mouseover', test); addEvent(tt, 'mouseout', test); } function test(evt) { var f, t = evt.target || evt.srcElement; if (evt.type == 'click') { if (t.nodeName == 'INPUT' && t.type == 'checkbox') setClass(tr(t), 'checked', t.checked); } else { f = !(evt.type == 'mouseout'); if (t.nodeName != 'TD' && t.nodeName != 'INPUT') return; t = tr(t); if (t.parentNode.nodeName == 'TBODY') setClass(t, 'hover', f); } function setClass(e, n, f) { n = ' ' + n; if (f) { e.className += n; } else { e.className = e.className.replace(n, ''); } } function tr(e) { while (e.nodeName != 'TR') e = e.parentNode; return e; } } function addEvent(elm, eName, func) { /*@cc_on elm. @if(@_jscript) attachEvent('on' + @else @*/ addEventListener( /*@end @*/ eName, func, false); } })(); </script> </body> </html>
その他の回答 (5)
- yyr446
- ベストアンサー率65% (870/1330)
どうせJAVASCRIPT使うなら、TD要素クリックで色付けと解除を交互に 反転するようにしたサンプル。 ※トグルをイベントハンドラー関数のクロージャでやろうとしたが、 うまくいかなかったので、クラスオブジェクトにしちゃった。 <body> <table id="target_table"> <tr> <td>AAAAAA</td> <td>BBBBBB</td> <td>CCCCCC</td> <td>DDDDDD</td> </tr> <tr> <td>AAAAAA</td> <td>BBBBBB</td> <td>CCCCCC</td> <td>DDDDDD</td> </tr> <tr> <td>AAAAAA</td> <td>BBBBBB</td> <td>CCCCCC</td> <td>DDDDDD</td> </tr> </table> <script type="text/javascript" charset="utf-8"> <!-- var toglecolor = function(){}; toglecolor.prototype = { flag:true, elm:undefined, toggle:function(){ this.flag = !this.flag; }, chgcolor:function(){ this.elm.parentNode.style.color=(this.flag)?'black':'blue'; this.toggle(); } }; var table=document.getElementById("target_table"); var listener =function(eve){setcolor(eve);}; try{ table.addEventListener('click',function(eve){clickhandler(eve)},true); }catch(e){ table.attachEvent('onclick',function(eve){clickhandler(eve)}); } function clickhandler(eve){ var event_target= (eve.srcElement || eve.target); var target = toglecolor.prototype; target.elm=event_target; target.chgcolor(); } // --> </script> </body>
- yyr446
- ベストアンサー率65% (870/1330)
おっと、 csshover.htcもjavascript利用だったかしらん。
- yyr446
- ベストアンサー率65% (870/1330)
CSSだけでやるなら、擬似要素 :hoverとか:focus を使うのでしょうが、昔のブラウザーは切捨てですね。 hover(マウスオーバー）の時だけですけど <style type="text/css"> //IE6対応 body { behavior : url ("csshover.htc");} // tr:hover {color:blue;} </style> <body><table> <tr><td>AAAA</td><td>BBBB</td><td>CCCC</td></tr> <tr><td>AAAA</td><td>BBBB</td><td>CCCC</td></tr> </table></body> JAVASCRIPTでやったほうが、断然便利です。 100行もあるなら、それぞれにonclickとかonfocusとか せずに、テーブルごとイベントを監視して、イベント 発生元の行のstyle属性を変更するようにします。
- zeff
- ベストアンサー率69% (137/198)
もし違っていたらスミマセンが、 onclick自体はHTMLタグだけど、 その中で動的なことを行なうのはJavaScriptなのではないでしょうか。 onmouseover,onmouseoutも同様だと思います。 buttoｎタグがそもそもJavaScriptありきじゃないですか。
- fujillin
- ベストアンサー率61% (1594/2576)
どういう条件下で使いたいのか不明なのと、onclick="～～"だとjavascript利用になってしまいますが… 一例として… <html> <head><title>test</title> <style type="text/css"> td.lc { color:green; } tr.red td { color:red; } tr.blue td { color:blue; } </style> <body> <table> <tr> <td class="lc"> <input type="button" value="色変更" onClick="this.parentNode.parentNode.className='red';"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> <tr> <td class="lc"> <input type="button" value="色変更" onClick="this.parentNode.parentNode.className='blue';"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> </table> </body> </html>
お礼
早速のご回答ありがとうございます。 parentNodeというのは初めて知りました勉強になります。 又、javascriptを利用せずに、色を変更できるのでしょうか？ 目的は、100行ある表で、 １．ユーザがチェックBOXを選択した行だけ色を変更したい ２．ユーザがマウスカーソルをあてた行だけ色を変更したい などがあります。Classの色を変更すると全行色が変わってしまい １．ですらツマヅイてしまいました(汗)