问题:

I have a table that gets populated from a database. I have 2 conditions that i need to apply

Apply Zebra striping to the Table (Completed)
Change Row color to red based td value

<tr class="alt">     <td class="status"><input type="text" value="One"></td>     <td class>Received</td> </tr> <tr class="alt">     <td class="status"><input type="text" value="One"></td>     <td class>Received</td> </tr> <tr class="alt">     <td class="status"><input type="text" value="Zero"></td>     <td class>Received</td> </tr> <tr class="alt">     <td class="status"><input type="text" value="One"></td>     <td class>Received</td> </tr> <tr class="alt">     <td class="status"><input type="text" value="Zero"></td>     <td class>Received</td> </tr>

$(document).ready(function() { $("tr.alt:even").css("background-color", "#f0f8ff"); $("tr.alt:odd").css("background-color", "#fcfceb"); });  $(document).ready(function() {    $('.status.val():contains("Zero")').closest('tr.alt').css('background-color', '#cd0000'); });

I wanna change the row color based on the input value

<td class="status"><input type="text" value="One"></td>

Here is a fiddle of what I've done so far

Would appreciate the help.

回答1:

To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)

Your HTML is a bit messed up though. You have missing quotes and <td class> is invalid.

http://jsfiddle.net/MMEhc/158/

EDIT: Updated version to suit the values being changed manually, not just those that are outputted (as I understood the question to be)

http://jsfiddle.net/MMEhc/159/

You'll see I moved the background colours out of the HTML and into the CSS to make it easier to manipulate. I also adjusted the red for even or odd rows.

回答2:

Try this,

Live Demo

$('td.status[value=Zero]').css('background-color', 'red');

Edit: Based on comments and change in OP

To change the whole row with the given criteria of td you can do it this way.

Live Demo

$('td.status[value=Zero]').closest('tr').css('background-color', 'red');

转载请标明出处:Change Row Color based on td value using Jquery

文章来源: Change Row Color based on td value using Jquery

标签