Código de JavaScript - Función para buscar y filtrar valores en tabla HTML (elemento del DOM)

Imágen de perfil

Función para buscar y filtrar valores en tabla HTML (elemento del DOM)gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 22 de Febrero del 2017 por kip
4.835 visualizaciones desde el 22 de Febrero del 2017. Una media de 56 por semana
Función que busca y muestra las celdas con el valor tomado de un input text, si no existe el dato o valor se mostrara un mensaje en la tabla.

Screenshot_404

Screenshot_405

Screenshot_406

Es de suma importancia que la tabla tenga una estructura como la siguiente thead -> tr -> th y tbody -> tr -> td:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
	<thead>
		<tr>
			<th>
			</th>
			.........
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
			</td>
			.........
		</tr>
	</tbody>
</table>

Para usarla se debe colocar el archivo btab.js (con el path adecuado) en el archivo HTML de esta forma:

1
<script src="btab.js"></script>

La función recibe tres parámetros:

btab(id_del_input, id_de_tabla, true or false [OPCIONAL] )

El primer parámetro es el el atributo id del input, de alli se obtendra el valor a buscar.
El segundo parámetro es el atributo id de la tabla, donde se buscaran los datos.
Por último y opcional, un booleano sea este true o false indicara si la busqueda sera insensible a mayúsculas, por defecto es sensible a estas (false) y si si desea cambiar esto pasarle como valor true.

La búsqueda se realiza en todas las celdas de la tabla, si en alguna de estas existe el dato de búsqueda se mostrara toda la fila perteneciente a esta celda.

Ejemplo:
Screenshot_402

Es posible buscar mas de un dato en la tabla, para esto se debe separar por una coma , (valor1, valor2, ....) cada valor a buscarse.

Ejemplo:
Screenshot_403

La llamada a la funcion (por si usas jQuery) no se debe colocar dentro de las lineas:
1
$(document).ready(...

Esta funcion se encarga de ejecutarse por si misma cuando el DOM esta completamente cargada para evitar algun problema con los elementos de este.

Si surge algún problema con la función escribirlo por aqui, pronto se mejorara y añadiran mas detalles.

Saludos

Requerimientos

Navegador

1.0
estrellaestrellaestrellaestrellaestrella(4)

Actualizado el 21 de Mayo del 2017 (Publicado el 22 de Febrero del 2017)gráfica de visualizaciones de la versión: 1.0
4.837 visualizaciones desde el 22 de Febrero del 2017. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

  • Archivos para descargar

Si alguno de los archivos de descarga no funciona, comentanos aquí el error.




Comentarios sobre la versión: 1.0 (4)

Imágen de perfil
xve
24 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Impresionante!!!
Responder
Imágen de perfil
ScriptShow
25 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Muy logrado!
Responder
Igor
11 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
¿Esta función: <script src="btab.js"></script> en que linea debo meter en el parrafo de table? Estoy aprendiendo. Gracias.
Responder
Imágen de perfil
kip
12 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
<script src="btab.js"></script>
Debe ir antes de llamar a la funcion btab(), puede estar entre las etiquetas <head></head>, es lo mas recomendable.
Responder

Comentar la versión: 1.0

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

http://lwp-l.com/s3875  
Revisar política de publicidad