动态更改CSS类行的表

Question

我有一个简单的表：

<table> <tr class="none"><td>value</td><td>value</td></tr></table> 

然后我需要检查每行中单元格的所有值。如果给定行的所有值都不相同，那么我需要将行的类从“none”更改为“active”。有没有办法使用jQuery来做到这一点？

Answer 1

像下面的东西会工作。另外，我会建议在您的<table>中使用<thead>和<tbody>以获得正确的标记。 更新：修正下面的函数来检查其他行的值;只要遇到不同的值，<tr>就会相应地更新。

小提琴演示：http://jsfiddle.net/kaCAF/4/

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myTable tbody tr').each(function() { 

     //compare each cell to adjacent cells 
     $(this).find('td').each(function() { 
      var $val = $(this).text(); 

      //checks for different values. as soon as a difference 
      //is encountered we move to next row 
      $(this).parent().find('td').each(function() { 
       if ($(this).text() != $val) { 
        $(this).parent().addClass('different'); 
        return false; 
       } 
      }); 
     }); 
    }); 

}); 
</script> 

<table id="myTable" border="1"> 
    <thead> 
     <tr><th>Col1</th><th>Col2</th><th>Col3</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Val 1</td><td>Val 1</td><td>Val 2</td></tr> 
     <tr><td>Val 1</td><td>Val 2</td><td>Val 2</td></tr> 
     <tr><td>Val 3</td><td>Val 3</td><td>Val 3</td></tr> 
     <tr><td>Val 123</td><td>Val 123</td><td>Val 123</td></tr> 
    </tbody> 
</table> 

Answer 2

如果细胞的变化动态值只是想和你所有匹配的细胞，尝试：

$(document).ready(function() { 
    var baseval = ""; 
    $("table tr.active td").each(function() { 
     if (baseval == "") { 
      baseval = $(this).text(); 
     } 
     else { 
      if ($(this).text() != baseval) { 
       $(this).parents("tr").removeClass("active"); 
       $(this).parents("tr").addClass("none"); 
      } 
     } 

    }); 

}); 

证明这里：http://jsfiddle.net/thomas4g/VVTjb/3/

Answer 3

您可以获得第一个td并与其他人比较：
请参阅http://jsfiddle.net/bouillard/maCBh/

Answer 4

$(document).ready(function() { 
    $('table tr').each(function(){ 
     var cells = $(this).find('td'); 
     if(!compareCells(cells)){ 
      $(this).addClass('active'); 
     } 
    });  
}); 

function compareCells(cells){ 
    var i = cells.length; 
    for (i=0;i<cells.length-1;i++) 
    { 
     if($(cells[i]).html() != $(cells[i+1]).html()){ 
      return false; 
     } 
    } 
    return true; 

}