比较 html 表中的两个单元格，如果不同则突出显示行

Question

I have an HTML table (tree table precisely but it doesn't matter) and it has several columns. For each row, it is very important that the values in one of the columns should be higher than the other column. If that is not the case then I'd like to highlight that entire row. How do I do that?

My HTML code looks like this:

<table id="stepstats-list-exp"> 
      <thead>
        <tr>
          <th> name   </th>
          <th> elp_01  </th>
          <th> elp_20  </th>
          <th> scal </th>
        </tr>
      </thead>
      <tbody>
        <tr data-tt-id=864845 data-tt-parent-id=>
          <td> &#39;Init&#39; </td>
          <td class="elp_01">  0 </td>
          <td class="elp_20"> 0 </td>
          <td class="scal"> 0.00 </td>
        </tr>
        
        <tr data-tt-id=864846 data-tt-parent-id=864845>
          <td> &#39;Update&#39; </td>
          <td class="elp_01">  0 </td>
          <td class="elp_20"> 0 </td>
          <td class="scal"> 0.00 </td>
        </tr>
        
        <tr data-tt-id=864847 data-tt-parent-id=>
          <td> &#39;Load&#39; </td>
          <td class="elp_01">  32 </td>
          <td class="elp_20"> 31 </td>
          <td class="scal"> 1.03 </td>
        </tr>
       </tbody>
    </table>

In all my test cases, elp_20 should always be smaller than elp_01 . If not, the entire row needs to be highlighted. For that purpose, I have this jQuery code that doesn't seem to be working. For each tr row, I'm checking each td column and comparing values.

<script type="text/javascript">
    /* Highlight row if elp_20 > elp_01 */
    $(document).ready(function () {
      $("#stepstats-list-exp tr").each(function () {
        $(this).find('td').each(function(){
          if (parseInt($(".elp_20").text(), 10) < parseInt($(".elp_01").text(), 10)) { 
            $(this).parent("tr").css('background-color', 'crimson');
            $(this).parent("tr").css('font-weight','bold');
            $(this).parent("tr").css('color','white');
          }
        });
      });
    });
    </script>

Answer 1

This working snippet accesses the table rows as an html collection that can be looped through to compare the values represented by the contents of the second and third cell of each row. An inline style attribute it used to highlight the row (alternative styling could be made by adding or toggling class names if something more complex is needed)

 let tableRows = document.getElementById("stepstats-list-exp").getElementsByTagName('tr'); for (let i=0; i<tableRows.length; i++) if (Number(tableRows[i].children[2].innerText) >= Number(tableRows[i].children[1].innerText)) { tableRows[i].setAttribute("style", "background: yellow"); }

 <table id="stepstats-list-exp"> <thead> <tr> <th> name </th> <th> elp_01 </th> <th> elp_20 </th> <th> scal </th> </tr> </thead> <tbody> <tr data-tt-id=864845 data-tt-parent-id=> <td> &#39;Init&#39; </td> <td class="elp_01"> 0 </td> <td class="elp_20"> 0 </td> <td class="scal"> 0.00 </td> </tr> <tr data-tt-id=864846 data-tt-parent-id=864845> <td> &#39;Update&#39; </td> <td class="elp_01"> 0 </td> <td class="elp_20"> 0 </td> <td class="scal"> 0.00 </td> </tr> <tr data-tt-id=864847 data-tt-parent-id=> <td> &#39;Load&#39; </td> <td class="elp_01"> 32 </td> <td class="elp_20"> 31 </td> <td class="scal"> 1.03 </td> </tr> </tbody> </table>

Answer 2

You can just iterate through the classes, add them to a variable and iterate with a for loop, if you need to iterate one elp_01 to all elp_20 just map it.

Here's an example:

let firstColumn = document.getElementsByClassName('elp_01').innerText
let secondColumn = document.getElementsByClassName('elp_20').innerText

for (let i = 0; i < firstColumn.length; i ++) {
    if (firstColumn[i] > secondColumn[i]) {
        // Something - maybe add a class in css to color the row and add it to the element
    }
    else {
        // Something else
    }
}