2016-10-11 4 views
0

私には要件があります。 http://jsfiddle.net/klbaiju/97oku7mb/3/別のセルをクリックしているTDの元の色を設定できませんでした。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script type='text/javascript'> 
$(window).load(function(){ 
$(document).ready(function() { 

      $('body').on('click', '.anchor3', function() { 
       var bcolor = $(this).parent().css("background-color");    
       $("a.anchor3:contains('B')").each(function() { 
        var pcolor = $(this).parent().css("background-color");     
        if (pcolor != "rgb(218, 112, 214)") { 
         $(this).parent().css("background-color", "red"); 
        } 
        else { 

         $(this).parent().css("background-color", "Orchid"); 
        } 
       }); 
       $("a.anchor3:contains('b')").parent().css('background-color', 'LightGrey'); 
       $(this).parent().css('background-color', 'Grey'); 



      }); 
     }); 
}); 

</script> 


</head> 

<body> 
    <table id="GridView3" cellspacing="0" border="1" border-collapse:collapse; rules="All" ;> 
<tbody> 
<tr> 
<th>ID </th> 
<th>01 </th> 
<th>02 </th> 
<th>03 </th> 
<th>04 </th> 
<th>05 </th> 
<th>06 </th> 
<th>07 </th> 
</tr> 
    <tr> 
    <td>101</td> 
    <td style="background-color: Orchid;"><a class="anchor3" href="#">B</a></td> 
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td> 
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td> 
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td> 
    <td style="background-color: Orchid;"><a class="anchor3" href="#">B</a></td> 
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td> 
    <td style="background-color: rgb(255, 0, 0);"><a class="anchor3" href="#">B </a></td> 
    </tr> 
</tbody> 
</table> 

</body> 

</html> 

では次の2つの要件

a)は、我々はその色がグレーに変わります任意のセルを押した場合(ワーキング)

あります 私は以下のhtmlに

JSのフィドルを持っています

b)他のセルを押すと、最後のセルは前の色に変わります。私たちがTH = 01セルを押したことを意味します。元の色はORCHIDです。それは灰色になります。ここでTH = 04セルを押すと、そのセルの背景色はグレーになりますが、TH = 1セルの色はORCHIDになります。現在は赤くなっています。

私は何をする必要がありますか?

ありがとうございます。

+0

あなたはセル1(オーキッド)をクリックすると蘭の色が何よりだからではありません。後で他のセル2(赤)をクリックすると、セル1は灰色になり、それは赤となり、オーキッドには変わりません。 – sahil

+0

代わりにクラスを使用して、必要なものに基づいてクラスを切り替えるのはなぜですか? – guradio

答えて

1

インラインスタイルとして背景色を追加する代わりに、ページのレンダリング時にセルにカラークラスを追加し、後でグレークラスを切り替えることができます。

$(document).ready(function() { 
 
    $('body').on('click', '.anchor3', function() { 
 
      $("a.anchor3:contains('B')").parent().removeClass('grey') ; 
 
      $(this).parent().addClass('grey'); 
 
     }); 
 
     });
.orchid { 
 
background-color: rgb(218, 112, 214); 
 
} 
 
.red { 
 
background-color: rgb(255, 0, 0); 
 
} 
 
.grey { 
 
background-color: rgb(128, 128, 128); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<table id="GridView3" cellspacing="0" border="1" border-collapse:collapse; rules="All" ;> 
 
<tbody> 
 
<tr> 
 
<th>ID </th> 
 
<th>01 </th> 
 
<th>02 </th> 
 
<th>03 </th> 
 
<th>04 </th> 
 
<th>05 </th> 
 
<th>06 </th> 
 
<th>07 </th> 
 
</tr> 
 
<tr><td>101</td><td class="orchid"> 
 
<a class="anchor3" href="#">B</a> 
 
</td><td class="red"> 
 
<a class="anchor3" href="#">B </a> 
 
</td><td class="red"> 
 
<a class="anchor3" href="#">B </a> 
 
</td><td class="red"> 
 
<a class="anchor3" href="#">B </a> 
 
</td><td class="orchid"> 
 
<a class="anchor3" href="#">B</a> 
 
</td><td class="red"> 
 
<a class="anchor3" href="#">B </a> 
 
</td><td class="red"> 
 
<a class="anchor3" href="#">B </a> 
 
</td></tr> 
 
</tbody> 
 
</table>

関連する問題