Question

我在这段代码上遗漏了一些东西，我的目标是在这张桌子上制作2个过滤器，选择id =＆＃34; myInput＆＃34;必须是决定表格出现并应用第一个过滤器的人，即js：

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  table.style.display = '';

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

第二个（id =＆＃34; myInput2＆＃34;）应该应用一个额外的过滤器，隐藏与另一个列不匹配的行，这里是js：

function myFunction2() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput2");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[5];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

这是HTML代码（忘记br和其他坏事，我只是整合现有代码）

<label>Zona</label> <select id="myInput2" onchange="myFunction2()">
        <option value="">Tutte le zone</option>
    </select> <label>Gruppo</label> 
    <select id="myInput" onchange="myFunction()">

        <option value="">Seleziona un gruppo di categoria</option>
    </select> <br>
    <br>
    <table  id="myTable" style="display: none;">
        <tr  class="header">
            <th>Categoria</th>
            <th>Descrizione</th>
            <th>Classe</th>
            <th>Tariffa</th>
            <th>Zona</th>
        </tr>
        <c:forEach var="infoSezioni" items="${outParamInfoSezioni}">
            <tr>
                <td style="display:none;">${infoSezioni.gruppo}</td>
                <td>${infoSezioni.categoria}</td>
                <td>${infoSezioni.descr}</td>
                <td>${infoSezioni.classe}</td>
                <td>${infoSezioni.tariffa}</td>
                <td>${infoSezioni.zonaCens}</td>
            </tr>
        </c:forEach>
    </table>

问题在于：当我应用其中一个过滤器时，另一个只是不起作用，我该如何解决？

Answer 1

请查看此内容

过滤器1和2中的

    //apply filter + checking flag
    if (td.innerHTML.toUpperCase().indexOf(filter) < 0 && (!tr[i].dataset.filtered)) {
        tr[i].style.display = "none";        
       //giving flag
        tr[i].dataset.filtered = true;
      }

在输入1和输入时显示表input2具有值：

// and myFunction2() as well
function myFunction() { 
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  //remove unnecessary space
  filter = input.value.trim().toUpperCase();
  //return if no value
  if(filter.length > 0) {return;}
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  //displaying table
  table.style.display = 'block';
...

如何制作双选滤镜？

1 个答案: