Question

I have table with following structure

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?

Answer 1

    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;

                        })
                    }

                })
            });