お世話になります。
●やりたいこと
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>
●こちらで確認したこと
1.Chromeのデバッグモードを使い1行ずつ追いかけてみましたが
こちらの期待通りiが1、10以外の時に下記コードに到達しており
background-colorにyellowが割り当てられているように見えるのですが
画面を見る限りでは色が変更されていませんでした。
JavaScript
1$(this).children().eq(i).css('background-color', 'yellow');
2.下記のように特定の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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/13 03:32
2017/03/13 03:45
2017/03/13 03:49