3

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?

2
  • 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, 2011 at 13:43
  • 1
    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, 2011 at 13:44

4 Answers 4

6

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>
2
  • 2
    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, 2011 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, 2011 at 14:59
2

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/

0

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

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

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.