Tengo una <tabla>
con valores de la que quiero filtrar resultados a partir de los valores inseridos en dos <input>
el primero filtra por una columna y el segundo filtra cualquier valor igual encontrado en la tabla.
Las filas que no contengan estos valores las oculto con CSS añadiendo las clases diplay:none
y display:block
. Esto lo hace bien pero lo que sucede es que si filtro por el primer input
y luego estos resultados los quiero filtrar por un criterio adicional en el segundo con mi función, este lo que hace es mostrarme las filas que tenia ocultas y volver a filtrarme la tabla.
Probé añadiendo diferentes clases con el clasList.add()
pero cuando cambio el criterio de búsqueda no me vuelve a mostrar las filas ocultas y creo que con el claslist.add()
complicaría la función un poco. ¿Qué pudiera hacer en este caso?
Gracias de antemano.
function buscarCapitulo(input){
var capitulo = (input.value).toLowerCase().trim();
var filas = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for(var i =0; i<filas.length; i++){
var textofila = (filas[i].cells[1].innerText).toLowerCase();
filas[i].className = (textofila.indexOf(capitulo)>=0) ? "mostrar" : "ocultar";
}
}
function buscarDescripcion(input){
var descripcion = (input.value).toLowerCase().trim();
var filas = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for(var i =0; i<filas.length; i++){
var textofila = (filas[i].innerText).toLowerCase();
filas[i].className = (textofila.indexOf(descripcion)>=0) ? "mostrar" : "ocultar";
}
}
window.addEventListener('load', function(){
var inputCapitulo = document.getElementById("buscarPorCapitulo");
inputCapitulo.onkeyup =function(){
buscarCapitulo(this);
}
var inputDescripcion = this.document.getElementById("buscarPorDescripcion");
inputDescripcion.onkeyup = function(){
buscarDescripcion(this);
}
});
.mostrar{
display: table-row;
}
.ocultar{
display: none;
}
<label for='capitolo'>Filtrar por Capitulo</label>
<input name='capitolo' id="buscarPorCapitulo" type="number">
<label for='descrizione'>Filtrar por una Descripcion</label>
<input name="descrizione" id="buscarPorDescripcion" type="text">
<br>
<table border="1" id="tabla">
<thead>
<tr id="encabezado">
<th>Anno</th>
<th>Capitulo</th>
<th>Importe</th>
<th>%</th>
<th>% iva</th></tr>
</thead>
<tbody id="table-data">
<tr>
<td>2019</td><td>123</td><td>548</td><td>5.00</td><td>21.00</td>
</tr>
<tr>
<td>2019</td><td>134</td><td>2456</td><td>10.00</td><td>21.00</td>
</tr>
<tr>
<td>2019</td><td>345</td><td>11111</td><td>5.00</td><td>21.00</td>
</tr>
</tbody>
</table>
DataTables
, en este enlace encuentras un ejemplo.