1

estoy intentando implementar un filtro anidado a mi tabla con un select, en total tengo una tabla con 5 columnas las cuales son: 1.Equipo 2.Producto 3.numero 4.fechainicial 5.fechafinal La idea es crear 5 select (uno para cada columna) y comenzar a filtrar para reducir la búsqueda de información. El problema es que solo me queda el primer filtro y no sé como anidarlos. El resultado que quiero es que el usuario debe seleccionar el primer select y elegir que tipo de máquina, posteriormente deberá elegir el producto que desee y por último podrá llevar mas profundo el filtro seleccionando el número de lote

function nombre() {
    var table = document.getElementById("myTable"),
    tr = table.getElementsByTagName("tr"),
    selected = this.value;
    for (var i = 1; i < tr.length; i++) {
    var equipos = tr[i].cells[0].innerHTML;
    if (equipos) {
      tr[i].style.display=selected=="" || equipos.indexOf(selected) > -1 ?"":"none";
    }
  }
}
window.onload=function() { // or addEventListener/attachEvent
  document.getElementById("nombre").addEventListener("change", nombre);
  
}

 
 function equipo() {
    var table = document.getElementById("myTable"),
    tr = table.getElementsByTagName("tr"),
    selected = this.value;
    for (var i = 1; i < tr.length; i++) {
    var equipos = tr[i].cells[0].innerHTML;
    if (equipos) {
      tr[i].style.display=selected=="" || equipos.indexOf(selected) > -1 ?"":"none";
    }
  }
}
window.onload=function() { // or addEventListener/attachEvent
  document.getElementById("equipo").addEventListener("change", equipo);
  
}
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="article-block">
    <div class="inner-block">
      <div class="tabel-block">
  
        <div class="three-column column-padding search-bar">
          <select name="equipo" id="equipo" />
          <option value="" selected="selected">Todos</option>
          <option value="Orden Surtida">Orden Surtida</option>
          <option value="Fabricación">Fabricación</option>
          </select>
          <select name="nombre" id="nombre" />
          <option value="" selected="selected">Todos</option>
          <option value="Norepirefrina">Norepirefrina</option>
          <option value="Ipratropio">Ipratropio</option>
          </select>
      
      
      
         
         
        </div>
  
        <table id="myTable" border="2">
          <tr>
            <th class="table-header">Maquina </th>
            <th class="table-header">Producto </th>
            <th class="table-header">numero </th>
            <th class="table-header">fechai</th>
            <th class="table-header">fechat </th>



          </tr>
             <tr>
              <td>Orden Surtida</td>
              <td>Norepirefrina </td>
              <td>211201</td>
              <td>04/12/21</td>
              <td>09/11/21</td>

             </tr> 
             <tr>
              <td>Fabricación</td>
              <td>Bupi  </td>
              <td>213456</td>
              <td>05/12/21</td>
              <td>16/11/21</td>

             </tr> 
             <tr>
              <td>Orden Surtida</td>
              <td>Norepirefrina </td>
              <td>211202</td>
              <td>02/12/21</td>
              <td>23/11/21</td>

             </tr> 
             <tr>
              <td>Fabricación</td>
              <td>Ipratropio    </td>
              <td>211203</td>
              <td>07/12/21</td>
              <td>04/11/21</td>

             </tr> 
        
        
       
        </table>
      </div>
    </div>
  </div>
</body>

1 respuesta 1

1

El problema es que estás usando dos veces la asignación

window.onload = ...

Con lo que la segunda asignación elimina (sobreescribe) la primera.

Tú misma tienes puesto un comentario que resolvería el problema:

window.addEventListener('load',funcion1);
...
window.addEventListener('load',funcion2)

Es decir, la principal diferencia entre las dos maneras de añadir event listeners es que esta segunda permite añadir un número indeterminado de ellos.

Por supuesto, también podrías juntar las dos funciones en una sola:

window.onload=function() { // or addEventListener/attachEvent
  document.getElementById("equipo").addEventListener("change", equipo);
  document.getElementById("nombre").addEventListener("change", nombre);
}

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.