0
98
ViewsComportamiento inesperado usando JavaScript menor que igual y mayor que igual en porcentaje
Actualmente estoy trabajando en un proyecto en el que los valores inferiores o iguales al 30 % aparecerán en rojo en la tabla. He escrito el código a continuación que verificará cada celda de la tabla y verificará su valor y, desde allí, ejecutará la condición y la resaltará en rojo si es verdadera, pero de alguna manera no está haciendo lo que esperaba. ¿Me pueden ayudar a entender por qué solo resalta el 0%.
<script> var td = document.getElementsByTagName("td"); var i = 0, tds = td.length; for (i; i < tds; i++) { if (parseFloat(td[i].innerHTML) >= 0.00 && parseFloat(td[i].innerHTML) <= 0.30) { td[i].setAttribute("style", "background:red;"); } } </script>Adjunto una captura de pantalla para darle una mejor idea de lo que está sucediendo. Del ejemplo siguiente, también debe colorear 12,50 % y 25,00 % de rojo.
Su respuesta es muy apreciada.
3 answers
Answer question0
El problema principal es lo que comentó traktor : donde pones 0.30 en lugar de 30 . Sin embargo, aquí hay otra forma de escribir ese código:
let aryTD = [...document.getElementsByTagName("td")]; const rxCommas = /,/g; // Regular Expression for locating commas aryTD.forEach((td)=> { let content = td.textContent.replace(rxCommas,""); // remove commas let float = parseFloat(content); if (float >= 0 && float <= 30) { td.style.backgroundColor = "red"; } }); <table> <tr><td>1,335.00%</td></tr> <tr><td>0.00%</td></tr> <tr><td>0.00%</td></tr> <tr><td>0.00%</td></tr> <tr><td>12.50%</td></tr> <tr><td>25.00%</td></tr> <tr><td>37.50%</td></tr> <tr><td>37.50%</td></tr> <tr><td>37.50%</td></tr> <tr><td>50.50%</td></tr> <tr><td>60.00%</td></tr> </table>0
Prueba este código
var td = document.getElementsByTagName("td"); var i = 0, tds = td.length; for (i; i < tds; i++) { if (parseFloat(td[i].innerHTML) >= 0.00 && parseFloat(td[i].innerHTML) <= 30) { td[i].setAttribute("style", "background:red;"); } } </script>0
Si el separador decimal siempre sigue siendo un punto ('.') y una coma siempre indica que un número tiene miles, puede
Reemplace las comas con la cadena nula antes de analizar los valores como flotantes, o
Deje que las comas indiquen que un número es mayor que
999.
Para un ejemplo de la segunda técnica sin cambiar mucho el código:
var td = document.getElementsByTagName("td"); var i = 0, tds = td.length; for (i; i < tds; i++) { var value = td[i].textContent; if( value.indexOf(',') < 0) { value = parseFloat(value); if( value >= 0 && value <= 30) { td[i].style.backgroundColor = "red"; } } } Para limitar los elementos td procesados a una columna en la tabla, puede usar
-
element.querySelectorAll]en combinación con -
:nth-child,:nth-colo:nth-last-childSelector de CSS
para seleccionar celdas de columna específicas que son los elementos secundarios de las filas en una tabla
Tenga en cuenta nth-col aún es experimental.
Aquí hay un ejemplo rápido para obtener las celdas de la segunda columna:
let columnCells = document.querySelectorAll("table tr td:nth-child(2)"); for( var i=0; i<columnCells.length; ++i) { console.log( columnCells[i].textContent); } <table> <tr><td>r1c1</td><td>r1c2</td></tr> <tr><td>r2c1</td><td>r2c2</td></tr> <tr><td>r2c1</td><td>r3c2</td></tr> <table>