Home > DeveloperSection > Forums > Change color of row based on value of a column in the row
john rob

Total Post:108

Posted on    August-23-2014 7:33 AM

 ASP.Net ASP.Net 

 1 Reply(s)
 689  View(s)
Rate this:

I have an sqldatasource that loads, data from my server and puts it in a datagrid.

What I want is that each row have a different color depending on which number is in that datarow column

$(document).ready(function () {

    $("#<%=GridView1.UniqueID%> tr").each(function () {

        var number = $(this).children('td:eq(6)').text();

        if (number == 'OK') {

            $(this).children('td').css({ "background-color": "lightgreen" });




Sumit Kesarwani

Total Post:378

Posted on    August-23-2014 8:50 AM

Hi John, 

Granted you've given your gridview a css class called 'myGridView' you could do the following:

$(document).ready(function () {

    $('.myGridView tr').each(function () {

        var number = $(this).children('td:eq(1)').text();

        if (number == '1') {

            $(this).children('td').css('background', 'red');




where 'td:eq(1)' refers to the second cell in a row. This of course will depend on what cell in your row contains this magic number.

I'm certain it's not the most elegant use of jQuery, but you could refactor it as you wish.

Don't want to miss updates? Please click the below button!

Follow MindStick