JS中的可过滤表格

Question

我已经设法修改了一个可过滤的表格JS脚本，但是我想让它更高级，因此我可以从剩余的过滤项目中筛选出来，我不太清楚如何去做。

这是一个jsfiddle与我有类似的设置。自从我开始搞乱这些代码后，代码变得非常混乱，您可能会看到我正在尝试使用该表单来确保我们没有开始覆盖我们的显示器：没有，但是后来我意识到我有点过分了头。

为了澄清，我希望能够做的是过滤说，名称，然后进一步筛选剩余列表，例如按类型。

有没有这样做的有效方式，我完全失踪？

原来这里是过滤器代码之前我搞砸它这是更清洁：

function filter(term, _id, cellNr){ 
    var suche = term.value.toLowerCase(); 
    var table = document.getElementById(_id); 
    var ele; 
    for (var r = 2; r < table.rows.length; r++){ 
     ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g,""); 
     if (ele.toLowerCase().indexOf(suche)>=0) 
      table.rows[r].style.display = ''; 
     else table.rows[r].style.display = 'none'; 
    } 
} 

Answer 1

我自己会做这样的：

function filter(_id) { 
 
     var table = document.getElementById(_id); 
 
     //get all filters. 
 
     var getFilters = [table.querySelectorAll("input")[0].value.toLowerCase(), 
 
         table.querySelectorAll("input")[1].value.toLowerCase(), 
 
         table.querySelectorAll("input")[2].value.toLowerCase()] 
 
     
 
     for (var r = 2; r < table.rows.length; r++) 
 
     { 
 
      //strip tags 
 
      var el1 = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g, ""); 
 
      var el2 = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g, ""); 
 
      var el3 = table.rows[r].cells[2].innerHTML.replace(/<[^>]+>/g, ""); 
 
      
 
      var search1 = el1.toLowerCase().indexOf(getFilters[0]); 
 
      var search2 = el2.toLowerCase().indexOf(getFilters[1]); 
 
      var search3 = el3.toLowerCase().indexOf(getFilters[2]); 
 
    
 
      //test all searches, if found or el = empty display 
 
      if ((search1 >= 0 || el1 == "") && (search2 >= 0 || el2 == "") && (search3 >= 0 || el3 == "")) { 
 
       table.rows[r].style.display = ''; 
 
      } else { 
 
       table.rows[r].style.display = 'none'; 
 
      } 
 
     }   
 
    }

<table id="table"> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Name</th> 
 
    <th>Type</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td> 
 
     <td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td> 
 
     <td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Bulbasaur</td> 
 
    <td>Grass</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>Charmander</td> 
 
    <td>Fire</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7</td> 
 
    <td>Squirtle</td> 
 
    <td>Water</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Bulbasaur</td> 
 
    <td>Poison</td> 
 
    </tr> 
 
    <tr> 
 
    <td>6</td> 
 
    <td>Charizard</td> 
 
    <td>Flying</td> 
 
    </tr> 
 
</table>

首先，从输入框中获取所有输入。将其存储在名为getFilters的数组中。

Then：
搜索不同的单元格并查看是否匹配。

当存在匹配项（不是-1）或该列的输入为空时返回true。所有三个条件都需要返回true才能显示一行。如果不隐藏该行。

所以id：1与其他两个输入为空将只产生两种类型的bulbasaur。

这里真正的技巧是条件：

(search1 >= 0 || el1 == "") && (search2 >= 0 || el2 == "")

它们与括号划分成块。意志评估分为真或假。这个例子中有三个块。