Algo que está claro es que un desarrollador tiene que valer para todo y aunque sea de back-end poder hacer cosas de front-end. Pues hoy ha sido uno de esos días. Así que, aunque es una chorrada, voy a poner aquí el código para buscar en una tabla de HTML de resultados con JavaScript. El campo de texto nos permite buscar en todos los campos de la tabla, excluyendo la cabecera claro.
<html>
<head>
<title>Table search: HTML - JavaScript</title>
</head>
<body>
<script language="javascript">
function doSearch() {
var tableReg = document.getElementById('regTable');
var searchText = document.getElementById('searchTerm').value.toLowerCase();
for (var i = 1; i < tableReg.rows.length; i++) {
var cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
var found = false;
for (var j = 0; j < cellsOfRow.length && !found; j++) {
var compareWith = cellsOfRow[j].innerHTML.toLowerCase();
if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1)) {
found = true;
}
}
if (found) {
tableReg.rows[i].style.display = '';
} else {
tableReg.rows[i].style.display = 'none';
}
}
}
</script>
<input id="searchTerm" type="text" onkeyup="doSearch()" />
<table id="regTable">
<tr><td>Id</td><td>Name</td><td>Surname</td><td>Gender</td><td>Age</td></tr>
<tr><td>1</td><td>John</td><td>Doe</td><td>M</td><td>30</td></tr>
<tr><td>2</td><td>Jane</td><td>Doe</td><td>F</td><td>31</td></tr>
<tr><td>3</td><td>Will</td><td>Smith</td><td>M</td><td>25</td></tr>
<tr><td>4</td><td>Bill</td><td>Gates</td><td>M</td><td>56</td></tr>
</table>
</body>
</html>
Lo único digno de mención en el código son los contadores i y j que corresposden con filas y columnas respectivamente. En el caso del contador i empieza en uno para evitar que se busque en la cabecera de la tabla. ¿Habrá otras formas de hacerlo? Seguro ¿mejores o peores? Probablemente de las dos, pero es una forma y aquí queda para futuras ocasiones. Nos vemos
Binary Coders 
Exelentisimo aporte, es justo lo que estaba buscando, no pense que se pudiera hacer, mil gracias.
LikeLike
Muchas gracias. Muy bueno.
LikeLike
está muy bueno 🙂
pero… si deseo colocar 2 buscadores para la misma tabla?
gracias de antemano 😀
LikeLike
Supongo que puedes añadir otro input y utilizar un código javascript similar para el segundo buscador, según lo que pretendas.
LikeLike
hola como puedo hacerle para que me muestre un mensaje
LikeLike
Soy al único que le pasa que después de realizar una búsqueda el scroll de la pagina deja de funcionar?
LikeLike
No he detectado nunca ese comportamiento, de todas formas, si te fijas el artículo tiene un año y medio de antigüedad, el código es bastante simple pero quizás algún elemento JS utilizado ya no está soportado o tiene un funcionamiento diferente. Otra opción, es que si lo estás usando con más JS puede ser que interfiera uno en el otro. No se me ocurre nada más ahora mismo.
LikeLike
Hola, yo quiero hacer la busqueda de los productos que contienen dentro de mi pagina, es el mismo codigo? es que como dice busqueda en tabla por eso pregunto. Gracias espero su ayuda
LikeLike
Sería diferente, la misma idea pero el código sería diferente. Tendrías que utilizar otros selectores y probablemente el estilo que quieras darle a los resultados sería diferente.
LikeLike
Este codigo es la mejor solucion ;)…
LikeLike
Esta excelente, lo que necesitaba
LikeLike
muchas gracias
LikeLike
buenas tardes muy buen codigo, si quiera buscar solo por las palabras que empiezen por las letras digitadas en orden y asi susesivamente, por que en esta busqueda me trae todo lo que vaya digitando….si se puede
gracias
LikeLike
Javascript tiene para los objetos tipo String un método startsWith(), bastaría con utilizarlo para comprobar la condición. Puedes ver un ejemplo aquí: http://www.w3schools.com/jsref/jsref_startswith.asp
LikeLike
en el codigo en que parte iria …gracias
LikeLike
Reemplazando la condición para encontrar el término buscado. Es decir, reemplazando esta parte:
searchText.length == 0 || (compareWith.indexOf(searchText) > -1)
LikeLike
hola , gracias por responder, q pena contigo mira que he intentado con varias posibilidades y no hace nada el programa. he cambiado la linea que me dijiste por las siguientes opciones pero ninguna me da.
If (startsWith.indexOf(searchText) > -1)
If (searchText.length == 0 || (startsWith.indexOf(searchText) > -1))
if (searchText.length == 0 || (str.startsWith.indexOf(searchText) > -1))
if (str.startsWith(searchText) > -1)
que pena contigo si te molesto.gracias
LikeLike
Lo acabo de probar y sería:
if (searchText.length == 0 || (compareWith.startsWith(searchText))) {
Prueba a ver y me dices
LikeLike
muchisimas gracias… si funciono. me salvaste un monton 🙂 que tengas un feliz año, cerca de tus seres queridos !!!!!!
LikeLike
muchisimas gracias… si funciono. me salvaste un monton🙂 que tengas un feliz año, cerca de tus seres queridos !!!!!!
LikeLike
Este código no podría resaltar el texto encontrado por ejemplo en amarillo?
LikeLike
De igual forma que el estilo para ocultarlo o no, puedes aplicar un estilo para que lo resalte en amarillo, ya sea inline o añadir una clase.
LikeLike
el que creó este código es un genio gracias!!!
LikeLike
buen aporte gracias
LikeLike