Highlight differences in row data of HTML table

Question

I have this HTML table in which:

1st row is a header of the table
3rd row shows erroneous data
for every erroneous row, we have 1 row that shows correct data (2nd row).

I want to write a function in HTML/Javascript/Jquery to highlight cells with matching data between two rows. We may have more than two rows of data.

So basically, we will have to test rows in set of two i.e. 1st header row will be skipped. compare 2nd to 3rd, then test 4th to 5th, then 6t to 7th and so on.

In the example below, expected value in column 11 (column name: Required?) for Mr. John Popular, is "N", but excel report shows "Y".

For Mr. Bill Smith, i.e. in row 4 and 5 dates are different in "Future Exp Date" column and "date of service" column.

I want to highlight this difference.

  

      
        
          Test
          first name
          last name
          person id
          contract id
          plan id
          authnumber
          request?
          window type
          date request 
          Required?
          Solved?
          More attaintion?
          Status
          Future Exp Date
          Issue resolved?
          date of service
          date of exp
          date of system
          Receipt date
          TAT1
          DaysTAT1
          TAT2
          DaysTAT2
        
      
      
        
          Correct data
          John
          Popular
          759876
          J4856
          642
          837522
          A
          FO
          2019-01-14
          N
          N
          NA
          Approved
          2019-01-14
          NA
          NA
          NA
          2019-01-14
          NA
          0.0
          Y
          NA
          N
        
        
          Wrong Data
          John
          Popular
          759876
          J4856
          642
          837522
          A
          FO
          2019-01-14
          Y
          N
          NA
          Approved
          2019-01-14
          NA
          NA
          NA
          2019-01-14
          NA
          0.0
          Y
          NA
          N
        
        
          Correct data
          Bill
          Smith
          64963
          J6291
          642
          837522
          A
          FO
          2019-01-14
          N
          N
          NA
          Approved
          2019-01-17
          NA
          NA
          NA
          2019-01-18
          NA
          0.0
          Y
          NA
          N
        
        
          Wrong Data
          Bill
          Smith
          64963
          J6291
          642
          837522
          A
          FO
          2019-01-17
          N
          N
          NA
          Approved
          2019-01-18
          NA
          NA
          NA
          2019-01-14
          NA
          0.0
          Y
          NA
          N

fdomn-m · Accepted Answer

I have a table which shows data from database (correct data) in the first row. Second row shows erroneous data from excel (wrong data).

I want to make it easy for the end use to see differences in database data and excel data by highlighting cells

Taking the original code and 2 rows, remove the cells part as it checks along the row instead of down the column. Can also remove looping rows as there's only two rows so it's a case of comparing row[0][col] with row[1][col]

With some other tweaks such as removing confusing .toggleClass(class, true) and a slight tweak to the class name / button caption to be clearer what they do, gives:

function highlight(){    
    $(arguments).addClass('changed');
}
function checkConstraints(e){
    // reset style before re-checking
    $('td.changed').removeClass('changed');
    
    // get rows as an array of array
    var rows = $('tbody>tr').map(function(elem,i){
        return [$(this).children('td').toArray()];
    }).toArray();        
    
    // only 2 rows, so no need to loop them
    // start at j=1 to skip first column
    for(var j = 1; j < rows[0].length; j++){

      if (rows[0][j].innerText != rows[1][j].innerText) 
      {               
         highlight(rows[0][j],rows[1][j]);
      }            
    }        
}
$('button').click(checkConstraints);

td {
    width:100px;
    height:50px;
    border:1px solid black;
}
table {
    border:1px solid black;
    border-collapse:collapse;
}
td.changed {
    background:orange;
}



  
    
      Test
      first name
      last name
      person id
      contract id
      plan id
      authnumber
      date request 
      Required?
      Solved?
      More attaintion?
      Status
    
  
  
    
      Correct data
      John
      Popular
      759876
      J4856
      642
      837522
      2019-01-14
      N
      N
      NA
      Approved
    
    
      Wrong Data
      John
      Wick
      759876
      J4856
      -642
      837522
      2019-01-14
      Y
      N
      NA
      Approved

Highlight differences in row data of HTML table

Answers (1)

Related Questions