CODEWITHSUNDEEP
javascriptjqueryhtml
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

Comparing and highlighting table data with jQuery

I have table with following structure enter image description here

Whenever user click on checkbook and click on link "Compare Diff" table column should highlight if the value is different . Users can select two , once user select two out of three (or more than three) other row will hide and only comparing rows will be shown.

Here is the link of the code

Edits: How I can add class to colgroup > col if any of the value in that column is diffrent? Or How can I add class/highlight div of the selected row compared td?

Upvotes: 4

Views: 3909

Answers (3)

Michal
Michal

Reputation: 13639

    jQuery(document).ready(function() {

                $("#compareme").click(function() {
//get all checkboxes that are not selected
                    var not_selected = $("input:not(:checked)");
//get all checkboxes that are selected
                    var selected = $("input:checked");
                    if($(selected).length < 2) {
//you need more than 1 for comparison
                        alert("please select more than 1 product")
                    } else {
//hide the not selected ones
                        $(not_selected).closest("tr").hide();
                    }
//loop through your columns
                    for(var i = 1; i < 5; i++) {
                        var prev = null;
                        $.each($(selected), function() {

                            var curr = $(this).closest("tr").find("td").eq(i).text();
//if at least one value is different highlight the column
                            if(curr !== prev && prev !== null) {
                                $("col").eq(i).addClass("highlight");
                            }
                            prev = curr;

                        })
                    }

                })
            });

Upvotes: 6

hohner
hohner

Reputation: 11588

The easiest way to do things like this is include the value of your checkboxes as IDs for your rows. You can do this easily with PHP or HTML. So, for example, if you have a checkbox with one value, make sure its sibling table cell has the value as its ID:

<tr>
   <td>
      <input type="checkbox" name="name" class="click_me" value="2">
   </td>
   <td id="2">
      2
   </td>
   <td id="5">
      5
   </td>
</tr>

When you click on the checkbox, collect the values in an array:

$('.click_me').click(function(){
   var thisArray = new Array();
   $(this).parent('td').siblings('td').each(function(){
      thisArray[] = $(this).attr('id');
   });
});

We now have an array filled with all of this row's values. Now we need to find all the other rows' values:

var otherArray = new Array();
$('.click_me:selected').not(this).each(function(){
   otherArray[] = $(this).parent().siblings('td').each(function(){
      otherArray[] = $(this).attr('id');
   });
});

Now we have two arrays: one with the values of the column you've just selected, the other will all other existing ones which are selected. Now we need to compare them. If any values match in the two arrays, we can do something like add a class:

for (var i = 0; thisArray[i]; i++) {
   if (jQuery.inArray(thisArray[i],otherArray)) { 
      $(this).parent('tr').addClass('selected');
   }
}

If a value exists both in thisArray and otherArray, the parent for the input you're clicking on will have a class added. You can use CSS to change the style for this table row, or even for select table cells in that row.

Upvotes: 1

Stephan Muller
Stephan Muller

Reputation: 27600

I'm not going to write your code for you, but here's a rough outline of how I'd handle this.

  1. Bind a function to the click event of your link. (When the compare link is clicked, it fires the function).

Then, the function does:

  1. Remove all the unchecked rows (probably loop through all the rows, look into it to see if they have an unchecked checkbox, and remove them).

  2. Take the first checked row out of the remaining rows, and walk through it's cells. For each cell you compare it's value to the one of the next row. A rough untested script:

    var c = 1; //start from column 1, because 0 is the Product Name
$('table tr')[0].each(this.children('td'), function(){
    if(this.val() == $('table td')[1].children('td')[c].val() {
        //apply a style to the current cell here
    }
    c = c + 1;
});

Hope this helps you on your way a bit? Please note that I wrote this off the top of my head just to give an indication of the way I'd handle this. Don't copypaste it, probably :P

Upvotes: 0

Related Questions