Changing grid row style based on condition in jQuery

Sheonarayan
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 2988 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, we shall learn how to change the background of the Grid (html table) row based on certain condition from a particular cell of the table.
Recommendation
Read Dynamically append data to the grid in ASP.NET with jQuery before this article.
This article is based on a question asked in the Forums thread. In this thread, author wanted to change the background of the row color based on "IsActive" field value.

To achieve this, I have created a demo page here and it looks something like below.

The Grid code

Below is the Grid code and I am assuming that each row of the grid has a class named "row", this will help us to find each row of grid on the page. In this code we have AutoId, First Name, Last Name, Age and Active column.

We are going to change the background of the row if the Active column value is "False".

<table id="table1">
        <tr class="row">
            <th>AutoId</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Active</th>
        </tr>

        <tr class="row">
            <td>16</td>
            <td>Sheo</td>
            <td>Narayan</td>
            <td>25</td>
            <td>True</td>
        </tr>
        <tr class="row">
            <td>17</td>
            <td>Soumen Kumar</td>
            <td>Banerjee</td>
            <td>57</td>
            <td>True</td>
        </tr>
        <tr class="row">
            <td>19</td>
            <td>Success UPDATED</td>
            <td>Simplicity UPDATED</td>
            <td>360</td>
            <td>True</td>
        </tr>
        <tr class="row">
            <td>1048</td>
            <td>Ram</td>
            <td>Kumar</td>
            <td>15</td>
            <td>False</td>
        </tr>
        <tr class="row">
            <td>1050</td>
            <td>Hari</td>
            <td>Shankar</td>
            <td>20</td>
            <td>True</td>
        </tr>
</table>

Now we have to find each row of the Grid and then find the last column value, if the last column value is "False", we will change that row background color.

jQuery code

In below jQuery code, first we have found out each row whose class attribute is set to "row". This will help us to iterate through each row. 

  <script>
        $('tr.row').each(function (index) {
            var lastCol = $(this).children("td").eq(4).text();
            if (lastCol == "False") {
                $(this).css("background-color", "#c0c0c0");
            }
        });
    </script>
In the each iteration of the loop, we are finding all children of that row and then we are finding the last column (as we have 5 columns so we are using jquery eq function to find out the last column whose index will be 4 - jQuery uses 0 based index) and getting its text. Here $(this) will help us to get the reference of that particular row that is being iterated.

Next, we are checking the value of the last column and if it is "False", we are changing its background color to "#c0c0c0".

Output



Hope this article would be useful. Thanks for reading.

Keep reading, learning and sharing your knowledge and do refer DotNetFunda.com to your friends and colleagues.


Recommendation
Read Loading CSS class names in C# after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Raja on: 7/3/2015 | Points: 25
You are so quick Sheo. Thanks and to the point answer.

Keep it up!

Thanks

Login to post response

Comment using Facebook(Author doesn't get notification)