6

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>

1
  • Prueba con DataTables, en este enlace encuentras un ejemplo.
    – DjCrazy
    Commented el 5 sept. 2019 a las 12:17

1 respuesta 1

5

Haciendo unos pequeños cambios en el código podrías conseguir lo que te propones. Según he entendido quieres que se muestren las filas cuyo contenido coincida con los dos criterios de búsqueda que marcan sendos <input>.

Para ello lo que necesitas es:

Muéstrame lo que coincida con criterio de búsqueda 1 y que además coincida con criterio de búsqueda 2.

Lo que he hecho es encapsular todo en la misma función, a la cual llama cada uno de los <input> al pulsar una tecla. Una vez salta el evento capturo el contenido de ambos <input> y muestro solamente las filas donde ambos criterios de búsqueda se cumplan.

También modifiqué la clase CSS con la que mostrabas la fila, ya que al darle un display: block alterabas su display nativo mostrándose fea la tabla (el display nativo de los <tr> es display: table-row).

function buscar() {
  var capitulo = (buscarPorCapitulo.value).toLowerCase().trim();
  var descripcion = (buscarPorDescripcion.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();
    var textocolumna = (filas[i].cells[1].innerText).toLowerCase();
    
    if (textocolumna.indexOf(capitulo) >= 0 && textofila.indexOf(descripcion) >= 0) {
      filas[i].className = 'mostrar';
    }
    else {
      filas[i].className = 'ocultar';
    }
  }
}

window.addEventListener('load', function(){

  var inputCapitulo = document.getElementById("buscarPorCapitulo");

  inputCapitulo.onkeyup =function(){
    buscar();
  }

  var inputDescripcion = this.document.getElementById("buscarPorDescripcion");

  inputDescripcion.onkeyup = function(){
    buscar();
  }
});
.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>2018</td><td>345</td><td>11111</td><td>5.00</td><td>21.00</td>
            </tr>
        </tbody>
    </table>

4
  • Muchas gracias! @phpMyGuel exactamente era eso lo q queria hacer...
    – RazerJs
    Commented el 5 sept. 2019 a las 12:28
  • solo un detalle el filtrar por capitulo ahora no esta filtrandome correctamente unicamente por los campos de la columna capitulo...
    – RazerJs
    Commented el 5 sept. 2019 a las 12:33
  • Ponme un ejemplo de las filas que quieres que se muestren al poner unos valores determinados en los <input> porque no entiendo muy bien a lo que te refieres.
    – phpMyGuel
    Commented el 5 sept. 2019 a las 12:48
  • 1
    El filtrar por la columna capitulo... solo adicione var textocolumna = (filas[i].cells[1].innerText).toLowerCase(); a tu respuesta y perfecto.. gracias
    – RazerJs
    Commented el 5 sept. 2019 a las 13:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.