带JS的多重过滤表

Question

我已经设法根据自己的喜好修改了一个可过滤的表格JS脚本，但是我希望通过制作它来使其变得更先进，这样我就可以从剩余的过滤项目中进行过滤，但是我可以我不太清楚如何去做。

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

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

有没有一种有效的方法可以让我完全失踪？

这是原始的过滤器代码，在我搞砸之前更加清洁：

onNewIntent()

Answer 1

我自己会这样做：

＆＃13;

＆＃13;

    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';
            }
        }        
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

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

然后：
搜索不同的单元格，看看是否匹配。

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

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

这里的真正诀窍是条件：

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

它们用括号分成块。将单独评估为真或假。这个例子中有三个块。

这是很久以前的答案，它保留了一种更现代的方法：

＆＃13;

＆＃13;

function filter(_id) {
  const table = document.getElementById(_id);
  //get all filters
  const getFilters = [...table.querySelectorAll("input")].map(element => element.value.toLowerCase());
 document.querySelectorAll("tr:nth-child(n+3) > td:first-child").forEach((firstTD) => {
    //iterate to the next to td's using nextSibling
    const textArray = [firstTD.textContent, firstTD.nextElementSibling.textContent, firstTD.nextElementSibling.nextElementSibling.textContent];
    const found = textArray.every((element, index) => {
      return element.toLowerCase().indexOf(getFilters[index]) >= 0 || getFilters[index] == "";
    });

    if (found) {
       firstTD.parentElement.style.display = '';
    } else {
      firstTD.parentElement.style.display = 'none';
    }

  });

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;