动态更改表中一行的CSS类

如何解决动态更改表中一行的CSS类

我有一个简单的表：

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

然后，我需要检查每一行中所有单元格的值。如果给定行的所有值都不相同，那么我需要将该行的类从\“ none \”更改为\“ active \”。有没有一种方法可以使用jQuery？     

解决方法

像下面这样的东西会起作用。另外，我建议您在

<table>

中使用

<thead>

和

<tbody>

进行适当的标记。更新：更正下面的功能以检查其他行的值；一旦遇到不同的值，将立即用一个类更新“ 4”。 小提琴演示：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>

    ,如果单元格的值动态变化，并且您只希望所有单元格都匹配，请尝试：

$(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/     ,您可以获取第一个td并与其他进行比较： 参见http://jsfiddle.net/bouillard/maCBh/     ,

$(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;

}