Question

I have the following table:

<table class='grid'>     <thead>         <tr>             <th>Name</th>             <th>Status</th>         <tr>     </thead>     <tbody>         <tr>             <td>Project 1</td>             <td>Closed</td>         <tr>         <tr>             <td>Project 2</td>             <td>Open</td>         <tr>         <tr>             <td>Project 3</td>             <td>Closed</td>         <tr>     </tbody> </table> 

I am trying to move some of my UI code that I used to do in the code-behind to jQuery. I would like to change the class of TR element whenever the Status (Column 2) column has a value of Open.

What would be the best approach to doing this with jQuery?

Answer 1

$('tbody > tr', 'table.grid').filter(function() {     return $(this).children('td').eq(1).text() == 'Open'; }).addClass('open_tr'); 

What it is doing:

It is selecting all the <tr> elements inside the <tbody> of the table.grid context. The filter function allows you to filter elements based on what you return, either true to keep or false to discard. So inside the filter we get all the children of the tr, get the 2nd <td>, and return whether or not its text is equal to ‘Open’ – if it is, it would return true, and we could keep the parent <tr> in the selector. All that is left would then just be <tr> with Open status, so we can add a class to mark them as such.