change row color if row value is negative

Question

I have a table where I have to highlight negative values. So I tried using jQuery and did not get my desire output. Lets suppose I have a table like this.

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">-50</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">0</div>
        <td class>Received</div>
    </tr>
    <tr class="alt">
        <td class="status">20</div>
        <td class>Received</div>
    </tr>
</table>

I'm using jQuery. But its not working.

$(document).ready(function(){
    $("tr.alt:even").css("background-color", "#f0f8ff");
    $("tr.alt:odd").css("background-color", "#fcfceb");
});

$(document).ready(function() {
    $(.status.val()<0).closest('tr.alt').css('background-color', '#cd0000');
    $(td.status[value<0]).css('background-color', 'red');
});

Answer 1

try

$(document).ready(function() {

   $( ".status" ).each(function(){
       var value = parseInt( $( this ).html() );
       if ( value < 0 )
       {
           $( this ).parent().css('background-color', 'red');
       }
   });
});

Answer 2

You can also do it as below.

As you said number goes negative then you can also check for - sign in html.

$('tr.alt td:contains("-")').parent('tr').css('background-color', '#cd0000');

Answer 3

You can use the filter() function in jQuery

JSFiddle

HTML

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">-50</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">0</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">20</td>
        <td class>Received</td>
    </tr>
</table>

jQuery

$(document).ready(function() {
   $( ".status" )
      .filter(function(){
         return $(this).html() < 0;
      })
      .parent().css('background-color', 'red');
});

Answer 4

you have a problem in you selector..

try this

 $(document).ready(function()
 {
   $("tr.alt:even").css("background-color", "#f0f8ff");
   $("tr.alt:odd").css("background-color", "#fcfceb");
   $('.status').each(function(){
      var $this =$(this); 
     if($this.text() < 0){
        $this.parent().css('background-color', '#cd0000');
        $this.css('background-color', 'red');
     } 
  }) 

});

or using filter()

 $(document).ready(function()
 {
    $("tr.alt:even").css("background-color", "#f0f8ff");
   $("tr.alt:odd").css("background-color", "#fcfceb");
   $( ".status" ).filter(function(){
     return $(this).text() < 0;
   }).css('background-color', 'red').parent().css('background-color', '#cd0000');

Answer 5

Try this

JS

$(document).ready(function()
{
  $("tr.alt:even").css("background-color", "#f0f8ff");
  $("tr.alt:odd").css("background-color", "#fcfceb");
  $("td" ).each(function() {
     if(parseInt($(this).text())<0)
     {
       $(this).parent().css('background-color', '#cd0000');
       $(this).css("background-color", "red");
     }
  });
});

HTML

<table border="1" cellpadding="4" cellspacing="4">

<tr class="alt">
<td class="status">1</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">-50</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">0</td>
<td class>Received</td>
</tr>
<tr class="alt">
<td class="status">20</td>
<td class>Received</td>
</tr>
</table>

DEMO

Answer 6

I'm assuming the HTML posted is off the top of your head? Because you have a lot of mismatched tags there. Fixed:

<table border="1" cellpadding="4" cellspacing="4">
    <tr class="alt">
        <td class="status">1</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">-50</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">0</td>
        <td class>Received</td>
    </tr>
    <tr class="alt">
        <td class="status">20</td>
        <td class>Received</td>
    </tr>
</table>

Then, I would move styles to a stylesheet (it makes everything easier to manage):

tr.alt:nth-child(even) {
    background-color: #f0f8ff;
}
tr.alt:nth-child(odd) {
    background-color: #fcfceb;
}
tr.alt.bad {
    background-color: #cd0000;
}

Then, selectors don't quite work that way, though you can query the rows and iterate the result. Also, .val() is for form fields; you want .text().

$(document).ready(function() {
    $('.status').each(function() {
        var $this = $(this);
        if (Number($this.text()) < 0)
            $this.parent().addClass('bad');
    });
});

You can see this in action here: http://jsfiddle.net/MBDKY/