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

Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(19)
Publicado el 19 de Septiembre del 2013 por Xavi
25.606 visualizaciones desde el 19 de Septiembre del 2013. Una media de 154 por semana
Código que muestra como realizar una búsqueda dentro de una de html con Javascript.
Este ejemplo ha sido sacado del foro de JavaScript de esta página.

Versión 1
estrellaestrellaestrellaestrellaestrella(19)

Publicado el 19 de Septiembre del 2013gráfica de visualizaciones de la versión: Versión 1
25.607 visualizaciones desde el 19 de Septiembre del 2013. Una media de 154 por semana
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 (19)

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
04 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
Excelente tu código esta genial!! gran aporte hno
Responder
an
17 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
a
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
02 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
08 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
08 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
09 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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2488