es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo buscar números en una tabla HTML utilizando JavaScript?

11 Jul, 2023 Programación

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

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para buscar números mayores o iguales al valor de entrada, puedes modificar la declaración if en la función myFunction() para verificar si textValue es tanto un número como mayor o igual al valor del filtro, de esta manera:

    if (!isNaN(textValue) && Number(textValue) >= filter) {
  tr[i].style.display = "";
} else {
  tr[i].style.display = "none";
}

    Este código primero verifica si textValue no es un NaN (no es un número) utilizando la función isNaN(), y luego lo convierte a un número utilizando la función Number(). Luego verifica si el número es mayor o igual al filter y muestra u oculta la fila en consecuencia.

    Aquí está la función myFunction() modificada con los cambios anteriores:

    function myFunction() {
  let filter = Number(document.getElementById("myInput").value);
  let myTable = document.getElementById("myTable");
  let tr = myTable.getElementsByTagName("tr");
  for (let i = 0; i < tr.length; i++) {
    let td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      let textValue = td.textContent || td.innerHTML;
      if (!isNaN(textValue) && Number(textValue) >= filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

    Ten en cuenta que debes convertir el valor del filter a un número utilizando la función Number(), ya que la propiedad value de un elemento input siempre es una cadena de texto.

Comments are closed.