He buscado en muchas páginas información de cómo hacer una búsqueda con varios filtros en un tabla html.
Que al momento de buscar se digite en el primer filtro el dato, y al momento de ingresar el siguiente dato en el otro filtro, no me borre el dato del filtro anterior. Necesito poner varios filtros pero que ninguno altere la búsqueda del otro.
Código HMTL:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Busqueda Central" title="Busqueda Rapida" class="form-control">
<table id=myTable>
<th>CODIGO</th>
<th>CIUDAD</th>
<th>CENTRAL</th>
<th>EQUIPO</th>
<th>TIPO DE EQUIPO</th>
<th>MARCA</th>
<th>MODELO</th>
<th>UNIDAD</th>
<th>CANTIDAD</th>
<tr>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
..<td id="hola" valign="top" width="150" align="center"></td>
</tr>
</table>
Código del buscador que estoy usando:
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[3];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>