priyanka.sarkar priyanka.sarkar - 1 month ago 8
CSS Question

Could not be able to set the original color of TD which clicking on another cell

I have a requirement.
I have the below html

JS fiddle: http://jsfiddle.net/klbaiju/97oku7mb/3/

<!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>


There are two requirements

a)if we press any cell its color will change to Grey (Working)

b) if we press any other cell the last cell should change into its previous colour. Means, supose we have pressed on TH = 01 cell whose original color is ORCHID. so it will be grey. Now if we press on say TH =04 cell, that cell background color will be grey but TH = 1 cell color should be ORCHID. At present it is coming as red.

What is the change that I need to do?

Thanks in advance.

Answer

Instead of adding background colors as inline style you can add color classes to the cells when rendering the page, and then later just toggle the grey class.

$(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>