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>

jquery table

我想如果等级大于条件，则将good的CSS类分配给<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 Fiddle demo

请注意选择器中的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 Fiddle demo

已编辑，以解决我使用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 Fiddle demo

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

1 个答案: