Vamos a aprender como crear una tabla con filtros en HTML de una manera sencilla y eficaz, sin jquery ni dependencias externas, solo javascript,html y css,
Para ello hay que seguir estos pasos, ten en cuenta que este código fuente está listo para copiar y pegar en tu editor de código y funcionará solo tienes que cambiar los datos de ejemplo
Paso 1: Crear el HTML
input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
table id="myTable">
tr class="header">
th style="width:60%;">Name/th>
th style="width:40%;">Country/th>
/tr>
tr>
td>Alfreds Futterkiste/td>
td>Germany/td>
/tr>
tr>
td>Berglunds snabbkop/td>
td>Sweden/td>
/tr>
tr>
td>Island Trading/td>
td>UK/td>
/tr>
tr>
td>Koniglich Essen/td>
td>Germany/td>
/tr>
/table>
Paso 2: Crear el CSS
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
Paso 3: Añadir el javascript
script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
/script>
Puedes ver el ejemplo funcionando (con su código fuente) aquí
Actualizado a 04/05/2021
Tabla con filtro HTML
Vamos a aprender como crear una tabla con filtros en HTML de una manera sencilla y eficaz, sin jquery ni dependencias externas, solo javascript,html y css,
ajedrez
es
https://cdnimages.juegosboom.com/ajedrez.wiki/1220/dbmicrodb2-ajedrez-tabla-con-filtro-html-378-0.jpg
2023-08-16
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente