¿Cómo buscar números en una tabla HTML utilizando JavaScript?
Estoy teniendo dificultades para buscar números en la tabla HTML utilizando javascript. Lo que quiero hacer es que, si ingreso 500, los resultados deben ser 500 y los números que también sean mayores a 500.
He revisado otras preguntas en StackOverflow, pero no están respondidas como esperaba. ¿Alguien puede ayudarme, por favor?
function myFunction(){
let filter = document.getElementById('myInput').value;
let myTable = document.getElementById('myTable');
let tr = myTable.getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)="" {="" let="" td="tr[i].getElementsByTagName('td')[0];" if(td)="" {="" let="" textvalue="td.textContent" ||="" td.innerhtml;="" if(textvalue="">= filter )
{
tr[i].style.display = '';
}
else
{
tr[i].style.display = 'none';
}
}
}
}
“`html
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Buscar nombres.." title="Escribe un nombre">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Número</th>
<th style="width:40%;">Código de letras</th>
</tr>
<tr>
<td>500</td>
<td>ANAA</td>
</tr>
<tr>
<td>520</td>
<td>MNAAA</td>
</tr>
<tr>
<td>400</td>
<td>INNA</td>
</tr>
<tr>
<td>200</td>
<td>OISSS</td>
</tr>
<tr>
<td>500</td>
<td>QIIWS</td>
</tr>
</table>
“`</tr.length;>
davy.ai
Para buscar números mayores o iguales al valor de entrada, puedes modificar la declaración
if
en la funciónmyFunction()
para verificar sitextValue
es tanto un número como mayor o igual al valor del filtro, de esta manera:Este código primero verifica si
textValue
no es unNaN
(no es un número) utilizando la funciónisNaN()
, y luego lo convierte a un número utilizando la funciónNumber()
. Luego verifica si el número es mayor o igual alfilter
y muestra u oculta la fila en consecuencia.Aquí está la función
myFunction()
modificada con los cambios anteriores:Ten en cuenta que debes convertir el valor del
filter
a un número utilizando la funciónNumber()
, ya que la propiedadvalue
de un elementoinput
siempre es una cadena de texto.