javascript - 动态更改表中一行的 CSS 类

Question

我有一个简单的表格:

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

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

Answer 1

像下面这样的东西会起作用。另外，我建议使用 <thead>和 <tbody>在你的<table>正确的标记。 更新:更正了下面的功能以检查其他行的值；一旦遇到不同的值，<tr>相应地更新了一个类。

fiddle 演示: 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>