Búsqueda en tabla: HTML – JavaScript

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

Búsqueda en tabla: HTML – JavaScript

24 thoughts on “Búsqueda en tabla: HTML – JavaScript

    1. fjavierm says:

      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.

      Like

  1. Anonymous says:

    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

    Like

    1. fjavierm says:

      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.

      Like

  2. cesar leal says:

    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

    Like

  3. fjavierm says:

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

    Like

    1. cesar leal says:

      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

      Like

      1. fjavierm says:

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

        Prueba a ver y me dices

        Like

    1. fjavierm says:

      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.

      Like

Leave a Reply to cont14 Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.