Comparing and highlighting tabular data with jQuery

Question

I have a table with the following structure

When the user clicks on the checkbook and clicks the Compare Diff link, the table column should indicate whether the value is different. Users can select two, once the user selects two of the three (or more than three) other rows that will be hidden, and only a comparison of the rows will be shown.

Here is the code link

edits: How can I add a class to colgroup> col if any value in this column is different? Or How to add a class / highlight div of the selected row compared to 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; }) } }) }); 

Answer 2

The easiest way to do such things is to specify the value of your flags as identifiers for your strings. You can do this easily with PHP or HTML. So, for example, if you have a checkbox with a single value, make sure that its sibling table cell has a value as an identifier:

 <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 check box, 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'); }); }); 

Now we have an array filled with all these string values. Now we need to find all the values ​​of the other lines:

 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 that you just selected, and the rest are all the other existing ones. Now we need to compare them. If any values ​​match in two arrays, we can do something like adding a class:

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

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

Answer 3

I will not write my code for you, but here is a rough outline of how I can handle this.

• Bind a function to a click event on your link. (When the comparison link is clicked, it launches the function).

Then the function has the form:

• Delete all unchecked lines (perhaps scroll through all the lines, look at them if they have a checkmark selected, and delete them).

• Take the first test line from the remaining lines and go through it. For each cell, you compare its value with one of the following lines. 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? Please note that I wrote this from head to head to give an indication of how I will handle this. Do not copy it, perhaps: P