Changing background color of cell using jquery [Resolved]

Posted by Klbaiju under jQuery on 9/5/2015 | Points: 10 | Views : 880 | Status : [Member] | Replies : 2
Hi All,

In my application there is an html table with data like this
<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>

following is the code for my requirement
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('body').on('click', '.anchor3', function () {
$("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>

this is my Jsfiddle link
http://jsfiddle.net/klbaiju/97oku7mb/3/
my requirement is if we press any of cell its background color should change into Grey.
and if we press any other cell ,last cell should change into its previous colour. and current cell change to Grey.
here the problem is if we press any cell its color will change to Grey.it is fine.
problem is with cell with orchid background.it will change to Grey but we press another cell ,previous one(orchid as background color) is changing to red instead of Orchid.
iam struck here .

Regards
Baiju




Responses

Posted by: Rajnilari2015 on: 10/11/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
@Klbaiju Sir,
Try this

<!DOCTYPE html>
<html>
<head>
<style>
.orchid {
background-color: rgb(218, 112, 214);
}
.red {
background-color: rgb(255, 0, 0);
}
.grey {
background-color: rgb(128, 128, 128);
}
</style>
<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 () {
$("a.anchor3:contains('B')").parent().removeClass('grey') ;
$(this).parent().addClass('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 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>
</body>
</html>


hope that helps

--
Thanks & Regards,
RNA Team

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Manicse on: 10/11/2016 [Member] Bronze | Points: 25

Up
0
Down
Hi,

If it was not a dynamic one you can check out simple code.

$( "table tr:nth-child(2) td:nth-child(1)" ).css("background-color", "blue");

$( "table tr:nth-child(3) td:nth-child(1)" ).css("background-color", "Green");
$( "table tr:nth-child(4) td:nth-child(1)" ).css("background-color", "Red");
$( "table tr:nth-child(5) td:nth-child(1)" ).css("background-color", "Yellow");


Mani.R

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response