Tengo una tabla HTML (tabla de árbol precisamente pero no importa) y tiene varias columnas. Para cada fila, es muy importante que los valores en una de las columnas sean más altos que en la otra columna. Si ese no es el caso, me gustaría resaltar toda esa fila. ¿Cómo puedo hacer eso?
Mi código HTML se ve así:
<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> 'Init' </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> 'Update' </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> 'Load' </td> <td class="elp_01"> 32 </td> <td class="elp_20"> 31 </td> <td class="scal"> 1.03 </td> </tr> </tbody> </table> En todos mis casos de prueba, elp_20 siempre debe ser más pequeño que elp_01 . De lo contrario, se debe resaltar toda la fila. Para ese propósito, tengo este código jQuery que no parece funcionar. Para cada fila tr , reviso cada columna td y comparo valores.
<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>Este fragmento de código de trabajo accede a las filas de la tabla como una html collection que se puede recorrer para comparar los valores representados por el contenido de la segunda y tercera celda de cada fila. Un atributo de estilo en línea que usó para resaltar la fila (se podría hacer un estilo alternativo agregando o alternando nombres de clase si se necesita algo más complejo)
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> 'Init' </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> 'Update' </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> 'Load' </td> <td class="elp_01"> 32 </td> <td class="elp_20"> 31 </td> <td class="scal"> 1.03 </td> </tr> </tbody> </table>Puede simplemente iterar a través de las clases, agregarlas a una variable e iterar con un bucle for, si necesita iterar un elp_01 a todos los elp_20 simplemente mapéelo.
Aquí hay un ejemplo:
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 } }