dポイントプレゼントキャンペーン実施中！

選択行だけ色を変更する場合のCSSの書き方

解決済

  • 質問者：php4
  • 質問日時：
  • 回答数：6件

以下の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#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>
    • good
    • 1
    • 件
通報する

No.5

  • 回答者： yyr446
  • 回答日時：

どうせ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>
    • good
    • 2
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

おっと、


csshover.htcもjavascript利用だったかしらん。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

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属性を変更するようにします。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： zeff#1
  • 回答日時：

もし違っていたらスミマセンが、


onclick自体はHTMLタグだけど、
その中で動的なことを行なうのはJavaScriptなのではないでしょうか。
onmouseover,onmouseoutも同様だと思います。
buttoｎタグがそもそもJavaScriptありきじゃないですか。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

どういう条件下で使いたいのか不明なのと、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。
parentNodeというのは初めて知りました勉強になります。

又、javascriptを利用せずに、色を変更できるのでしょうか？

目的は、100行ある表で、
１．ユーザがチェックBOXを選択した行だけ色を変更したい
２．ユーザがマウスカーソルをあてた行だけ色を変更したい
などがあります。Classの色を変更すると全行色が変わってしまい
１．ですらツマヅイてしまいました(汗)

通報する
お礼日時：2009/12/22 14:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報