Tableのtrをクリックすると配下にあるtdの色を変えたい

1	2	3	4	5	6	7	8	9	10	11	12
1	2	3	4	5	6	7	8	9	10	11	12
1	2	3	4	5	6	7	8	9	10	11	12

お世話になります。

●やりたいこと
Tableのtrをクリックすると、その配下にある2列目、11列目を除く
tdの背景色が黄色になり、再度クリックすると白に戻したく思い
下記のようなコードを記述致しましたが何のエラーも出ず、動作もしませんでした。

●動作環境
・Windows 7 Pro
・Chrome 56.0.2924.87
・jQuery 1.11.3
・HTML5.0

●コード

JavaScript
1$(function(){
2  $("#test tr").on("click", function(){
3    $(this).children().not('th').each(function(i){
4      if(i != 1 && i != 10){
5        if($(this).children().eq(i).css('background-color') == 'rgb(255, 255, 0)'){
6          $(this).children().eq(i).css('background-color', 'white');
7        } else {
8          $(this).children().eq(i).css('background-color', 'yellow');
9        }
10      }
11    })
12  });
13});

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<script src="jquery-1.11.3.min.js"></script>
5<script src="test.js"></script>
6</head>
7<body>
8<table id="test">
9  <tr>
10    <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th>
11  </tr>
12  <tr>
13    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
14  </tr>
15  <tr>
16    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
17  </tr>
18</table>
19</body>
20</html>

●こちらで確認したこと
１．Chromeのデバッグモードを使い1行ずつ追いかけてみましたが
こちらの期待通りiが1、10以外の時に下記コードに到達しており
background-colorにyellowが割り当てられているように見えるのですが
画面を見る限りでは色が変更されていませんでした。

JavaScript
1$(this).children().eq(i).css('background-color', 'yellow');

２．下記のように特定のtdだけの色を変えようとすると期待した通りの動きになりますが、
これを列の数だけ記載するのはあまりに酷いので、どうにかしたいと思っております。

JavaScript
1$(function(){
2  $("#test tr").on("click", function(){
3    if($(this).children().eq(2).css('background-color') == 'rgb(255, 255, 0)'){
4      $(this).children().eq(2).css('background-color', 'white');
5    } else {
6      $(this).children().eq(2).css('background-color', 'yellow');
7    }
8  });
9});

お手数おかけ致しますがご助言頂けないでしょうか。
よろしくお願い申し上げます。

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

回答2件

これで良いような。

CSS
1td {
2	background-color: #fafafa;
3}
4.yellow {
5	background-color: #aa0;
6}

JavaScript
1$( function() {
2	$( '#test tr' ).on( 'click', function() {
3		$( this ).children().not( 'th' ).toggleClass( 'yellow' );
4	} );
5} );
6```**動くサンプル：**[https://jsfiddle.net/so37vd2s/](https://jsfiddle.net/so37vd2s/)

投稿2017/03/13 03:13

kei344

総合スコア69643

kei344

2017/03/13 03:32

あ、1と11の除外をすっかり見落としていました。

Everatch

2017/03/13 03:45

除外などはクラス定義してHTML側で指定にした方が拡張性あるような気もしなくないですね

Batoh33789

2017/03/13 03:49

回答有難うございます。 toggleClassというものがあるのですね。勉強になります。

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

ベストアンサー

CSS
1td.clicked{background-Color:yellow;}

Javascript
1$(function(){
2  $("#test tr").on("click", function(){
3  $(this).find('td:not(:eq(1),:eq(10))').toggleClass('clicked');
4//    $(this).find('td').filter(function(i){return i!==1 && i!==10;}).toggleClass('clicked');
5  });
6});