javascript - 带有 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 的数组中。

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

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

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

这里真正的技巧是条件:

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

它们被分成带有括号的 block 。将分别评估为 true 或 false。此示例中包含三个 block 。

---

这个问题很久以前就得到了回答，它值得一个更现代的方法:

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

  });

}

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