Jquery Iterate over table and highlight cells that have changed

Question

I have a table that is a history of a mysql record.

I want to add a button that will highlight the changes.

<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>600</td>
</tr>
</table>

In this example the 600 would be highlighted as it was 300 and is now 600.

UPDATE: Thanks, I should have said there would be more than 2 rows. could be upto 20 rows

Answer 1

Your solution should go along these lines. Assuming set1 and set2 are id's of two trs here is a sample code (not tested).

var s1 = $('tr#set1 td');
var s2 = $('tr#set2 td');

var l = $('tr#set1 td').length;

for(var i =0; i<l i++){
   if(s1.eq(i).text() != s2.eq(i)){
      $(s2.eq(i)).highlight();
   }
}

Answer 2

$('table tr.new td').each(function(i){
    //First TR td, Previous Rows

    td = $(this);
    check = $('table tr.prev td:eq('+i+')');

   if(td[0].innerText != check[0].innerText)
   {
        check.addClass('Changed');
   }
})​

This should do it but you need to add 2 classes:

<table>
<tr class="new">
  <td>150</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr class="prev">
  <td>100</td>
  <td>200</td>
  <td>600</td>
</tr>
</table>​

Demo: http://jsfiddle.net/hjXZd/1/

Hope this helps.

---

I advise you to do an attr for each TD and place the mysql id in there so that you will only compare the rows that are the same in the DB, otherwise if your first list has more items then the second list the results will be corrupt.

Answer 3

Assuming your table has the id results, here is a solution:

var topRow = $('table#results tr:eq(0)');
var bottomRow = $('table#results tr:eq(1)');
topRow.find('td').each(function(index,item){
    var shadow = bottomRow.find('td:eq('+index+')');
    if($(item).contents().text()!=shadow.contents().text()){
        shadow.css({'background':'yellow'});
    }
});

Update: this solution compares the top row with all following ones:

$('table#results tr:eq(0) td').each(function(index,item){
    var orig = $(item).contents().text();
    $('table#results tr:gt(0)').find('td:eq('+index+')').each(function(index2,item2){
        var shadow = $(item2);
        if(orig!=shadow.contents().text()){
            shadow.css({'background':'yellow'});
        }

    });
});

Answer 4

Using Jquery .live you can handle multiple elements. See here http://api.jquery.com/live/

You have to give ids for the changed values.. which can be inside divs. Hope td also may work

On button click using this .live you can chnage style of div

like highlighting.

Use addClass function os jquery itslef or you can add css using jquery add

Answer 5

This jsFiddle shows an example that will iterate over a table of any size and highlight the cells that have changed from the previous row.

$(function() {
var $rows = $("tr");

for (oldIndex = 0; oldIndex < $rows.length-1; oldIndex++) {
   var newIndex = oldIndex + 1;
    var $oldCols = $("td", $rows[oldIndex]);
    var $newCols = $("td", $rows[newIndex]);

    for (col = 0; col < $oldCols.length; col++) {
       var $newCol = $($newCols[col]);
        if ($($oldCols[col]).html() != $newCol.html()) {
            $newCol.addClass("highlight");
        }

    }


}
});​