Código de JavaScript - Buscar en el contenido de una tabla de HTML con JavaScript

Imágen de perfil
Val: 2.231
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Buscar en el contenido de una tabla de HTML con JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(52)
Actualizado el 30 de Junio del 2019 por Xavi (Publicado el 19 de Septiembre del 2013)
77.964 visualizaciones desde el 19 de Septiembre del 2013
Código que muestra como realizar una búsqueda dentro de una <tabla> de html con Javascript.
Este ejemplo ha sido sacado del foro de JavaScript de esta página.

buscar-en-tabla-javascript

no-coincidencias

dos-coincidencias

Versión 1
estrellaestrellaestrellaestrellaestrella(51)

Publicado el 19 de Septiembre del 2013gráfica de visualizaciones de la versión: Versión 1
68.763 visualizaciones desde el 19 de Septiembre del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo funcionando aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="es">
<head>
	<title>Buscar en el contenido de una tabla</title>
	<script language="javascript">
		function doSearch()
		{
			var tableReg = document.getElementById('datos');
			var searchText = document.getElementById('searchTerm').value.toLowerCase();
			var cellsOfRow="";
			var found=false;
			var compareWith="";
 
			// Recorremos todas las filas con contenido de la tabla
			for (var i = 1; i < tableReg.rows.length; i++)
			{
				cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
				found = false;
				// Recorremos todas las celdas
				for (var j = 0; j < cellsOfRow.length && !found; j++)
				{
					compareWith = cellsOfRow[j].innerHTML.toLowerCase();
					// Buscamos el texto en el contenido de la celda
					if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1))
					{
						found = true;
					}
				}
				if(found)
				{
					tableReg.rows[i].style.display = '';
				} else {
					// si no ha encontrado ninguna coincidencia, esconde la
					// fila de la tabla
					tableReg.rows[i].style.display = 'none';
				}
			}
		}
	</script>
 
	<style>
		#datos	{border:1px solid #ccc;padding:10px;}
		#datos tr:nth-child(even) {background:#ccc;}
		#datos td {padding:5px;}
	</style>
</head>
 
<body>
	<h1>Buscar en el contenido de una tabla</h1>
	<form>
		Cadena a buscar <input id="searchTerm" type="text" onkeyup="doSearch()" />
	</form>
	<p>
		<table id="datos">
			<tr>
				<th>id</th><th>Nombre</th><th>Apellidos</th><th>Género</th><th>Edad</th>
			</tr>
			<tr>
				<td>1</td><td>Juan</td><td>Perez</td><td>M</td><td>30</td>
			</tr>
			<tr>
				<td>2</td><td>Jose</td><td>Vazquez</td><td>M</td><td>31</td>
			</tr>
			<tr>
				<td>3</td><td>Luis</td><td>Astorga</td><td>M</td><td>25</td>
			</tr>
			<tr>
				<td>4</td><td>Luisa</td><td>Valdes</td><td>F</td><td>56</td>
			</tr>
		</table>
	</p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (51)

driver1964
29 de Abril del 2014
estrellaestrellaestrellaestrellaestrella
Funciona a la perfección y es de suma sencillez ponerlo en una web.

Me gustaría saber si sería posible hacer lo mismo pero en vez de con tablas con listas tipo
<ul>
<li> </li>
<li> </li>
</ul>

Gracias de antemano.
Responder
Juan
19 de Agosto del 2014
estrellaestrellaestrellaestrellaestrella
Exelente código.
Responder
Andrés
4 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
Excelente tu código esta genial!! gran aporte hno
Responder
jose
23 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
esta super fino tu script gracias que DIOS te bendigs
Responder
Adrian
16 de Junio del 2015
estrellaestrellaestrellaestrellaestrella
Como puedo hacer en una busqueda de registros con un script consultando la informacion a un excel!
Responder
giovanni
27 de Agosto del 2015
estrellaestrellaestrellaestrellaestrella
EXELENTE compa me sacaste de un nudo que tenia programando ,,, saludos
Responder
carlo yovani aguilar avendaño
23 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
muy buen codigo 5 estrellas
Responder
andresw
2 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
Excelente tu código. Funciona de maravilla. Pregunta: ¿Cómo lograr que la cabecera de la tabla no desaparezca? Lo ideal es que conserve esa fila para no perderse.
Responder
Sergio
26 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
Tal y como esta el código, la cabecera no te desaparecera. Esto es porque a la hora del comenzar a recorrer las distintas filas de la tabla ha empezado por la 1 (recordemos que en los arrays se empieza por el 0). En tu caso el 0 es la cabecera y esa fila no la recorre.
Un saludo.
Responder
mabel
15 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
hola como le puedo hacer para que en lugar de de que no muestre nada mande un mensaje me podrían ayudar
Responder
Marcos
24 de Febrero del 2016
estrellaestrellaestrellaestrellaestrella
Saludo estimado. Estoy empesando a explorar el mundo de la web y tengo el siguiente caso.
*-Tengo datos cargados en una <table> cada <td> tiene un botón en cual estoy intentando que al dar click al botón pueda alar los datos que contiene ese <td> y pasarlo a una ventana modal. me podrían ayudar. Gracias
Responder
Sergio
26 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
Genial tio! Buen aporte, muy útil.
Responder
Carlos Alberto Lorenzo Rodríguez
8 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
Muy buen aporte, estaría bueno agregarle seguir buscando dentro de la búsqueda separado por espacios.
Muchas Gracias.
Responder
Leonardo
8 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
Esta muy bueno, funciona perfecto, es rapidamente adaptable y facil de entender!.
Gracias.
Responder
redled
23 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
Good...........
Responder
Pablo
9 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Me encanto, funciona perfecto, me gustaría eso si, que no aparezca la información, y solo aparezca cuando uno realiza la búsqueda
Responder
Enrique
17 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
VM1576 frmSeguimiento.php:939 Uncaught TypeError: Cannot read property 'rows' of null(…)

me muestra este error al querer utilizar la funcion, alguien sabe a que se debe?

de antemano muchas gracias!!!
Responder
Jazmin Flores
18 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Mil Gracias! Me has salvado!!
Responder
alfredo
9 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
gracias, lo que andaba buscando...........
lo adapte a mi tabla y funciono perfecto
Responder
Aurora
12 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Sencillamente genial. Muchas gracias por compartir ^_^
Responder
Felipe
30 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Excelente!
Responder
Kevin
28 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
Excelente aporte, me sivió mucho. Saludos
Responder
valentin
17 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
una pregunta como puedo hacer para poner el resultado en otro documento html ??
Responder
Misael
27 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
excelente, muy buen aporte
Responder
18 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
Magnifico!!!!
Responder
roger
9 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Eres una capa sin hiro gracias por el aporte :v
Responder
second
8 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
como podrias poner un contador a la tabla de las coincidencias encontradas
Responder
Lucas
22 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
en
found=true;
Responder
Alma
15 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
Hola, me gustaria saber como realizar la busqueda en tablas que has sido llenadas dinamicamnte, con datos capturados en un formulario.

Saludos.
Responder
Batman
12 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Lo has conseguido solucionar?
Responder
Alejandra
28 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
excelente código.
Responder
hernan
28 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
Muchas gracias por tu gran aporte me fue de gran ayuda
Responder
Alexander Jimenez
1 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
Hermano, Dios te de larga vida. Tu mente es muy valiosa!
Me has ayudado a lo grande! Gracias
Responder
denis
11 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
https://jsfiddle.net/wyk63qma/ entrenle al friddle funcionando muy bien saludos
Responder
sheshin
6 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Gracias, así fueran todas las ayudas. :D
Responder
Juan Camilo Martinez
14 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Si la lista en la tabla tiene paginación igual lo busca o solo lo busca en los que están en la lista visible?
Responder
Hilder
28 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Excelente aporte. Gracias
Responder
10 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
como podría contar los datos de la tablas y mostrar cuantos hay por usuario
Responder
Kabuto.exe
15 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
Como evitar que al buscar por ejemplo, 'lass' , no tome en cuenta todos, muestra todos los resultados por que tambien encueentra class e id, entonces si quieres buscar un resultado con 'las', muestra todas las que tienes clase (class)
Responder
jose cobis
23 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
excelente aplicacion. muy agradecido por su aporte
Responder
Indira
2 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
Genial, buen aporte, rápido y sin complicaciones
Responder
Alan Colli
3 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
Sos un crack! muy funcional, muchas gracias.
Responder
Walter
7 de Noviembre del 2018
estrellaestrellaestrellaestrellaestrella
Perfecto es lo que estaba buscando.... gracias...
Responder
Juanan
14 de Noviembre del 2018
estrellaestrellaestrellaestrellaestrella
Buenas, cómo sería este código pero que solo busque en una de las columnas, por ejemplo en id??
Responder
Jeisson Rincon
18 de Diciembre del 2018
estrellaestrellaestrellaestrellaestrella
Solo tendrias que dejar la etiqueta <td> en el campo que vas hacer la consulta
Responder
Imágen de perfil
24 de Noviembre del 2018
estrellaestrellaestrellaestrellaestrella
¡Un buen aporte!.

Se pueden sacar variantes para adaptar a otros proyectos. Es muy interesante...

Gracias
Responder
Mary
14 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
27 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
Gracias
Responder
Juan
29 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
Como puedo adaptar el codigo para que busque un número en cualquier orden?
Responder
Imágen de perfil
28 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
Esta perfecto pero encuentro un error comun q cometen los usuarios con esta funcionalidad...

Si al momento de buscar, no encuentra nada, muestra vacio, pero hay usuarios que no comprenden y presionan enter y lo que sucede es que vuelve a mostrar toda la lista completa.

Como se podría hacer para que al buscar algo, si no encuentra nada aparezca un cartelito que diga "sin resultados para ésta búsqueda" o algo asi?
Responder
Imágen de perfil
1 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
Hola Ariel, ya he publicado una segunda versión mostrando cuando no haya resultados y mostrando los resultados encontrados.
Espero que te sirva
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

Versión 2 - con mensaje de coincidencias
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 30 de Junio del 2019gráfica de visualizaciones de la versión: Versión 2 - con mensaje de coincidencias
9.202 visualizaciones desde el 30 de Junio del 2019
http://lwp-l.com/s2488