Home / Questions / 290671
Accepted
RazerJs
Asked: 2020-09-06 01:38:36 +0800 CST 2020-09-06 01:38:36 +0800 CST

Filter a table and hide fields from two inputs

  • 772

I have one <tabla>with values ​​from which I want to filter results from the values ​​inserted in two <input>, the first filters by a column and the second filters any equal value found in the table.

Rows that don't contain these values ​​are hidden with CSSdiplay:none by adding the and classes display:block. This does it well but what happens is that if I filter by the first inputand then I want to filter these results by an additional criterion in the second with my function, what this does is show me the rows that I had hidden and filter the table again .

I tried adding different classes with clasList.add()it but when I change the search criteria it doesn't show me the hidden rows again and I think that with it it would claslist.add()complicate the function a bit. What could I do in this case?

Thanks in advance.

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>

javascript

1 Answers

  1. Best Answer

    Making a few small changes in the code you could get what you want. As I understand it, you want to display the rows whose content matches the two search criteria that both mark <input>.

    For this what you need is:

    Show me what matches search criteria 1 and also matches search criteria 2.

    What I have done is encapsulate everything in the same function, which is called by each one of them <input>when pressing a key. Once the event is triggered, I capture the content of both <input>and show only the rows where both search criteria are met.

    I also modified the CSS class with which you displayed the row, since by giving it a you display: blockaltered its displaynative, showing the table ugly (the native display of <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>

    • 5