突出显示 HTML 表格的行数据差异

Question

我有这个 HTML 表格，其中：

• 第一行是表头
• 第三行显示错误数据
• 对于每个错误的行，我们都有 1 行显示正确的数据（第 2 行）。

我想用 HTML/Javascript/Jquery 编写一个函数来突出显示两行之间具有匹配数据的单元格。 我们可能有两行以上的数据。

所以基本上，我们必须测试一组两个行，即第一个标题行将被跳过。比较第 2 到第 3，然后测试第 4 到第 5，然后测试第 6 到第 7 等等。

在下面的示例中，John Popular 先生的第 11 列（列名：必填？）中的预期值为“N”，但 Excel 报告显示“Y”。

对于 Bill Smith 先生，即第 4 行和第 5 行的“未来到期日期”列和“服务日期”列中的日期不同。

我想强调这种差异。

  
<table border="1" class="dataframe data">
      <thead>
        <tr style="text-align: right;">
          <th>Test</th>
          <th>first name</th>
          <th>last name</th>
          <th>person id</th>
          <th>contract id</th>
          <th>plan id</th>
          <th>authnumber</th>
          <th>request?</th>
          <th>window type</th>
          <th>date request </th>
          <th>Required?</th>
          <th>Solved?</th>
          <th>More attaintion?</th>
          <th>Status</th>
          <th>Future Exp Date</th>
          <th>Issue resolved?</th>
          <th>date of service</th>
          <th>date of exp</th>
          <th>date of system</th>
          <th>Receipt date</th>
          <th>TAT1</th>
          <th>DaysTAT1</th>
          <th>TAT2</th>
          <th>DaysTAT2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Correct data</td>
          <td>John</td>
          <td>Popular</td>
          <td>759876</td>
          <td>J4856</td>
          <td>642</td>
          <td>837522</td>
          <td>A</td>
          <td>FO</td>
          <td>2019-01-14</td>
          <td>N</td>
          <td>N</td>
          <td>NA</td>
          <td>Approved</td>
          <td>2019-01-14</td>
          <td>NA</td>
          <td>NA</td>
          <td>NA</td>
          <td>2019-01-14</td>
          <td>NA</td>
          <td>0.0</td>
          <td>Y</td>
          <td>NA</td>
          <td>N</td>
        </tr>
        <tr>
          <td>Wrong Data</td>
          <td>John</td>
          <td>Popular</td>
          <td>759876</td>
          <td>J4856</td>
          <td>642</td>
          <td>837522</td>
          <td>A</td>
          <td>FO</td>
          <td>2019-01-14</td>
          <td>Y</td>
          <td>N</td>
          <td>NA</td>
          <td>Approved</td>
          <td>2019-01-14</td>
          <td>NA</td>
          <td>NA</td>
          <td>NA</td>
          <td>2019-01-14</td>
          <td>NA</td>
          <td>0.0</td>
          <td>Y</td>
          <td>NA</td>
          <td>N</td>
        </tr>
        <tr>
          <td>Correct data</td>
          <td>Bill</td>
          <td>Smith</td>
          <td>64963</td>
          <td>J6291</td>
          <td>642</td>
          <td>837522</td>
          <td>A</td>
          <td>FO</td>
          <td>2019-01-14</td>
          <td>N</td>
          <td>N</td>
          <td>NA</td>
          <td>Approved</td>
          <td>2019-01-17</td>
          <td>NA</td>
          <td>NA</td>
          <td>NA</td>
          <td>2019-01-18</td>
          <td>NA</td>
          <td>0.0</td>
          <td>Y</td>
          <td>NA</td>
          <td>N</td>
        </tr>
        <tr>
          <td>Wrong Data</td>
          <td>Bill</td>
          <td>Smith</td>
          <td>64963</td>
          <td>J6291</td>
          <td>642</td>
          <td>837522</td>
          <td>A</td>
          <td>FO</td>
          <td>2019-01-17</td>
          <td>N</td>
          <td>N</td>
          <td>NA</td>
          <td>Approved</td>
          <td>2019-01-18</td>
          <td>NA</td>
          <td>NA</td>
          <td>NA</td>
          <td>2019-01-14</td>
          <td>NA</td>
          <td>0.0</td>
          <td>Y</td>
          <td>NA</td>
          <td>N</td>
        </tr>
      </tbody>
    </table>
    <br>
    <button>Check constraints</button>
    

Answer 1

我有一个表格，它在第一行显示来自数据库的数据（正确的数据）。 第二行显示来自 excel 的错误数据（错误数据）。

我想让最终用户通过突出显示单元格来轻松查看数据库数据和 Excel 数据的差异

取原始代码和 2 行，删除 cells 部分，因为它沿着行而不是列向下检查。也可以删除循环行，因为只有两行，所以这是比较 row[0][col] 和 row[1][col] 的情况

通过其他一些调整，例如删除令人困惑的.toggleClass(class, true)，并对类名/按钮标题进行轻微调整，以便更清楚地了解它们的作用，给出：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" class="dataframe data">
  <thead>
    <tr style="text-align: left;">
      <th>Test</th>
      <th>first name</th>
      <th>last name</th>
      <th>person id</th>
      <th>contract id</th>
      <th>plan id</th>
      <th>authnumber</th>
      <th>date request </th>
      <th>Required?</th>
      <th>Solved?</th>
      <th>More attaintion?</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Correct data</td>
      <td>John</td>
      <td>Popular</td>
      <td>759876</td>
      <td>J4856</td>
      <td>642</td>
      <td>837522</td>
      <td>2019-01-14</td>
      <td>N</td>
      <td>N</td>
      <td>NA</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>Wrong Data</td>
      <td>John</td>
      <td>Wick</td>
      <td>759876</td>
      <td>J4856</td>
      <td>-642</td>
      <td>837522</td>
      <td>2019-01-14</td>
      <td>Y</td>
      <td>N</td>
      <td>NA</td>
      <td>Approved</td>
    </tr>
  </tbody>
</table>
<br>
<button>Compare Rows</button>