RSS

Búsqueda en tabla: HTML – JavaScript

09 May

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

Anuncios
 
20 comentarios

Publicado por en 9 mayo, 2013 en prácticos

 

20 Respuestas a “Búsqueda en tabla: HTML – JavaScript

  1. Alfredo

    12 marzo, 2014 at 1:03 am

    Exelentisimo aporte, es justo lo que estaba buscando, no pense que se pudiera hacer, mil gracias.

     
  2. Gabriel Andres Zulian Avila

    29 septiembre, 2014 at 5:45 pm

    Muchas gracias. Muy bueno.

     
  3. manuel melenge

    10 septiembre, 2015 at 5:58 pm

    está muy bueno 🙂
    pero… si deseo colocar 2 buscadores para la misma tabla?

    gracias de antemano 😀

     
    • fjavierm

      12 septiembre, 2015 at 5:05 pm

      Supongo que puedes añadir otro input y utilizar un código javascript similar para el segundo buscador, según lo que pretendas.

       
  4. mabel

    15 diciembre, 2015 at 9:42 pm

    hola como puedo hacerle para que me muestre un mensaje

     
  5. Sergio Paz

    30 diciembre, 2015 at 2:24 am

    Soy al único que le pasa que después de realizar una búsqueda el scroll de la pagina deja de funcionar?

     
    • fjavierm

      30 diciembre, 2015 at 7:48 pm

      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.

       
  6. Anónimo

    7 marzo, 2016 at 11:07 pm

    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

     
    • fjavierm

      8 marzo, 2016 at 7:09 pm

      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.

       
  7. Anónimo

    14 abril, 2016 at 4:45 am

    Este codigo es la mejor solucion ;)…

     
  8. Anónimo

    21 julio, 2016 at 6:56 am

    Esta excelente, lo que necesitaba

     
  9. Anónimo

    21 julio, 2016 at 6:57 am

    muchas gracias

     
  10. cesar leal

    20 diciembre, 2016 at 8:10 pm

    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

     
    • fjavierm

      21 diciembre, 2016 at 9:35 am

      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

       
      • cesar leal

        27 diciembre, 2016 at 7:46 pm

        en el codigo en que parte iria …gracias

         
  11. fjavierm

    28 diciembre, 2016 at 12:44 am

    Reemplazando la condición para encontrar el término buscado. Es decir, reemplazando esta parte:
    searchText.length == 0 || (compareWith.indexOf(searchText) > -1)

     
    • cesar leal

      29 diciembre, 2016 at 3:16 pm

      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

       
      • fjavierm

        29 diciembre, 2016 at 11:18 pm

        Lo acabo de probar y sería:
        if (searchText.length == 0 || (compareWith.startsWith(searchText))) {

        Prueba a ver y me dices

         
  12. Anónimo

    30 diciembre, 2016 at 9:48 pm

    muchisimas gracias… si funciono. me salvaste un monton 🙂 que tengas un feliz año, cerca de tus seres queridos !!!!!!

     
  13. cesar leal

    30 diciembre, 2016 at 9:49 pm

    muchisimas gracias… si funciono. me salvaste un monton🙂 que tengas un feliz año, cerca de tus seres queridos !!!!!!

     

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: