动态更改表格中一行的 CSS 类答案

【问题标题】：Dynamically change CSS class of a row in a table动态更改表格中一行的 CSS 类
【发布时间】：2011-05-26 13:27:21
【问题描述】：

我有一张简单的桌子：

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

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

【问题讨论】：

这是一个 HTML 类，而不是 CSS 类。（虽然有 CSS 类选择器，但没有 CSS 类之类的东西）。
见下面我的回答。另外，由于这是您的第一篇文章，我想我会提到有一个漂亮的绿色复选标记，如果您觉得这是一个很好的解决方案，您可以单击它。欢迎来到 Stack Overflow，这是一个网站，您可以在其中发现人们只是 太棒了。

标签： javascript jquery html-table tablerow tablecell

【解决方案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>

【讨论】：

我不相信这能回答问题 - 他看起来像是在尝试将一行中的项目相互比较 - 而不是与某个静态值进行比较。
@BonyT：+1 我很惊讶其他 SO 最初对此表示赞同。感谢您指出了这一点。我很高兴更新代码并为 OP 创建小提琴。

【解决方案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/

【讨论】：

【解决方案3】：

您可以获取第一个 td 并与其他人进行比较：
见http://jsfiddle.net/bouillard/maCBh/

【讨论】：

【解决方案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;

}

【讨论】：