javascript - 比较表格中的单元格并将 CSS 类添加到其

Question

我有一张有这么多行的表。它的结构就像这段代码

<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>

我希望如果成绩大于标准，则将一个名为的 CSS 类good分配给<tr>其他类名bad（基于一个<th>将<tr> 有一个类名）。运行时结果会是这样（注意第 11 和 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>

请注意，我的目的是用 CSS 突出显示好的坏结果行。

Answer 1

我建议：

$('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 小提琴演示。

请注意tbody选择器中的 ，为防止将其应用于第一行，我将该行移动到一个thead元素中，因为它似乎是表格的标题。

请注意，在上面，each()严格来说，这是不必要的，因为addClass()可以与函数一起使用：

$('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 小提琴演示。

---

编辑以解决我使用过的事实parseInt()，而不是parseFloat()处理文本到数字的转换：

$('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 小提琴演示。