CODEWITHSUNDEEP
javascriptjquery
matt
matt

Reputation: 25

Jquery Iterate over table and highlight cells that have changed

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

Upvotes: 1

Views: 1210

Answers (5)

Steve Greatrex
Steve Greatrex

Reputation: 15999

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");
        }

    }


}
});​

Upvotes: 1

zod
zod

Reputation: 12427

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

Upvotes: 0

Sean Patrick Floyd
Sean Patrick Floyd

Reputation: 298938

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

    });
});

Upvotes: 0

RobertPitt
RobertPitt

Reputation: 57268

$('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.

Upvotes: 0

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

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();
   }
}

Upvotes: 0

Related Questions