Dynamically change CSS class of a row in a table

Question

I have a simple table:

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

I then need to check all the values of the cells in every row. If all of the values are not the same for a given row, then I need to change the class of the row from "none" to "active". Is there a way to do this using jQuery?

That's an HTML class, not a CSS class. (There's no such thing as a CSS class, although there are CSS class selectors). — Quentin, May 26 '11 at 13:43
see my answer below. also, since this is your first post, I figured I would mention there is a fancy green checkmark that you can click if you feel this is a good solution. Welcome to Stack Overflow, a website where you can find people are just _freakin' awesome_. — pixelbobby, May 26 '11 at 13:44

pixelbobby · Answer 1 · 2011-05-26T15:56:40.070

Something like the below would work. Also, I would recommend using <thead> and <tbody> in your <table> for proper markup. Update: corrected function below to check values of other rows; as soon as a different value is encountered, the <tr> is updated with a class accordingly.

Fiddle Demo: 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>

I don't believe this answers the question - he looks like he's trying to compare items within a row against each other - not against some static value. — BonyT, May 26 '11 at 13:50
@BonyT: +1 I'm surprised other SO's upvoted this originally. Thanks for pointing that out. I had fun updating the code and creating a fiddle for the OP. — pixelbobby, May 26 '11 at 14:59

score 2 · Answer 2 · answered May 26 '11 at 13:38

If the value of the cell changes dynamically and you just want all the cells to match, try:

$(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");
            }
        }

    });

});

Demonstrated Here: http://jsfiddle.net/thomas4g/VVTjb/3/

score 0 · Answer 3 · answered May 26 '11 at 13:42

0

You can get first td and compare to other:
See http://jsfiddle.net/bouillard/maCBh/

answered May 26 '11 at 13:42

Benoît

7,395
2
25
30

score 0 · Answer 4 · answered May 26 '11 at 13:48

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

}

Dynamically change CSS class of a row in a table

4 Answers4