3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)

3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)

¡Hola a [email protected] (Hello World!)!

En este artículo vamos a aprender a crear una tabla con datos para web ¡y con un filtro de búsqueda incluido!

Primeramente vamos a definir en rasgos generales que es un 'html'.




HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (). [by Wikipedia]

Los ficheros que vamos a utilizar con el html serán los *.css ('Hojas de estilo') y los *.js ('Ficheros JavaScript', JavaScript es un lenguaje embebido que es interpretado en el navegador del cliente'), en nuestro artículo utilizaremos ficheros javascript y una serie de etiquetas que dejo como práctica para que los lectores investiguen (no es necesario incidir sobre el código javascript). También quiero hacer mensión a una librería que vamos a usar de javascript y que es muy utilizada en la actualidad como es JQuery. Esta librería la llamamos desde la etiqueta head.

En una página html nos vamos a encontrar primeramente con la etiqueta html que representa el documento y dos etiquetas fundamentales que van dentro: head y body. ¡Comenzamos...!

Empezamos por la 'cabecera del html' o head:


 Buscar en tabla (José Joaquín Sánchez)   

El 'cuerpo del html' o body:


  
Filtro de Búsqueda: 

Rank. Nombre Jugador Foto Elo
1. [MI] J. Carlos Ibarra 2515
2 [MF] David Antón 2466
3 [MF] Paco Albarracín 2375
4 [MF] Josue Cano 2369
5 Borja Navarro 2335

Puedes descargar los ficheros del ejemplo: Pulsando Aquí
Finalmente el artículo genera:


Filtro de Búsqueda:


Rank. Nombre Jugador Foto Elo
1. [MI] J. Carlos Ibarra 2515
2 [MF] David Antón 2466
3 [MF] Paco Albarracín 2375
4 [MF] Josue Cano 2369
5 Borja Navarro 2335
laboratorio-web

RELACCIONADO CON 3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)