HTML 選択した行の部分的な色付け

選択したらその行の一部に色を付けたいのですがどうやっても行全体に色がついてしまいます。
どのようにすればよいのでしょうか・・・。

右側の

<td colspan="5"></td> の５列には色は付けたくないです。よろしくお願いします・・・。

コード

</tbody>

</table> </html>

行動規範の内容に同意します

回答2件

ベストアンサー

一応参考までにJqueryで書いたものを載せておきます。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
</head>
<body>
<table id="test">
	<tr>
	 	<td class="choice">りんご</td>
		<td class="choice">ばなな</td>
		<td>カレー</td>
		<td>ラーメン</td>
	</tr>
	
	<tr>
	 	<td>りんご</td>
		<td>ばなな</td>
		<td>カレー</td>
		<td>ラーメン</td>
	</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$("#test tr").click(function(){
		$(".choice",this).css('background-color','red');
	});
</script>
</body>
</html>

【追記】
あらかじめ色を変えたい部分が決まっているのなら、classを書いておいてそれを指定してあげればよいです。

投稿2017/12/20 07:24

編集2017/12/20 07:45

退会済みユーザー

総合スコア0

sigret

2017/12/20 07:27

一部だけ色を付けたい場合はどうすればよいのでしょう・・。 <tr> <td>りんご</td> <td>ばなな</td> <td>カレー</td> <td>ラーメン</td> </tr> この状態で行選択した場合「りんご」と「ばなな」にだけ色がつくイメージです。

退会済みユーザー

2017/12/20 07:46 編集

回答編集しました！コードも変えてます。

sigret

2017/12/20 08:14

色がつかなくなりましたｗ原因究明します。。ｗｗ

行動規範の内容に同意します

colspan="5"

の箇所だけ無視すればいいのでしょうか？
該当する5列全て対象なのですか？

たとえばクラスを使って

css
1.active td{
2  background-Color:#FFCC00;
3}
4.active td[colspan="5"]{
5  background-Color:#FFFFFF;
6}

javascript
1document.addEventListener('click',function(e){
2  var t=e.target;
3  while(t){
4    if(t.nodeName=="TR"){
5      Array.prototype.map.call(t.parentNode.children,function(x){
6        x.classList.remove("active");
7      });
8      t.classList.add("active");
9    }
10    t=t.parentNode;
11  }
12});

HTML
1<table id="color" border>
2<tbody>
3<tr>
4<td colspan="3">&nbsp;</td>
5<td>&nbsp;</td>
6<td colspan="5">&nbsp;</td>
7</tr>
8<tr>
9<td colspan="3">&nbsp;</td>
10<td>&nbsp;</td>
11<td>&nbsp;</td>
12<td>&nbsp;</td>
13<td>&nbsp;</td>
14<td>&nbsp;</td>
15<td>&nbsp;</td>
16</tr>
17<tr>
18<td colspan="3">&nbsp;</td>
19<td>&nbsp;</td>
20<td>&nbsp;</td>
21<td>&nbsp;</td>
22<td>&nbsp;</td>
23<td>&nbsp;</td>
24<td>&nbsp;</td>
25</tr>
26</tbody>
27</table>