Question

I have a table with so many rows. it’s structure is like this code

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px">
   <tbody>
      <tr>
         <td>Name</td>
         <td>Criteria</td>
         <td>Grade</td>
      </tr>
      <tr>
         <td>Nick</td>
         <td>5</td>
         <td>5.75</td>
      </tr>
      <tr>
         <td>David</td>
         <td>3</td>
         <td>11.5</td>
      </tr>
   </tbody>
</table>

I want if the grade was bigger than criteria, a CSS class named good be assigned to the <tr> otherwise the class name be bad (based on one <th> the <tr> will have a class name).
The runtime result will be like this (pay attention to line 11 and 19):

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px">
   <tbody>
      <tr>
         <td>Name</td>
         <td>Criteria</td>
         <td>Grade</td>
      </tr>
      <tr class="good">
         <td>Nick</td>
         <td>5</td>
         <td>5.75</td>
      </tr>
      <tr class="bad">
         <td>David</td>
         <td>3</td>
         <td>2.5</td>
      </tr>
   </tbody>
</table>

Note that my intention is to highlight good bad result rows with CSS.

Answer 1

I’d suggest:

$('tbody tr').each(
    function(){
        var that = $(this),
            criteria = parseInt(that.find('td:eq(1)').text(),10),
            grade = parseInt(that.find('td:eq(2)').text(),10),
            trClass = grade > criteria ? 'good' : 'notGood';
        that.addClass(trClass);
    });​

JS Fiddle demo.

Note the tbody in the selector, to prevent this applying to the first row, I moved that row into a thead element, since it seems to be a header for the table.

Note that, in the above, the each() is, strictly speaking, unnecessary as addClass() could be used with a function:

$('tbody tr').addClass(function() {
    var that = $(this),
        criteria = parseInt(that.find('td:eq(1)').text(), 10),
        grade = parseInt(that.find('td:eq(2)').text(), 10);
        return grade > criteria ? 'good' : 'notGood';
});​

JS Fiddle demo.

---

Edited to address the fact that I’d used parseInt(), instead of parseFloat() to handle the conversion of text to number:

$('tbody tr').addClass(function() {
    var that = $(this),
        criteria = parseFloat(that.find('td:eq(1)').text()),
        grade = parseFloat(that.find('td:eq(2)').text());
        return grade > criteria ? 'good' : 'notGood';
});

JS Fiddle demo.