如何在一个 table 上使用多个过滤器列表 (html-select) 来缩小结果范围而不产生冲突？

Question

我不是程序员，但正在尝试创建一个简单的学术网站。我在 table 中有很多文章，并设法使用一些 javascript 和 select-html 创建了一个适用于 W3 Schools 的过滤器。我正在尝试添加第二个 select-html 过滤器以进一步缩小结果范围，但似乎只有第一个列表有效。我尝试添加额外的 ID 来区分这两个列表，但可能做错了并且无法正常工作。

我希望能够做的是使用第一个过滤器保留所有 Author1 实例，如果您选择使用第二个过滤器缩小到 Category1，它将导致所有 Author1 和 Category1（如果有）（在上面的示例中，将只保留第一行）。

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  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";
      }
    }
  }
}

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Author1</option>
  <option>Author2</option>
</select>

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Category1</option>
  <option>Category2</option>
</select>


<table id="myTable" height="100%" width="100%">
  <tr>
    <td>Author1, Category1</td>
  </tr>
  <tr>
    <td>Author1, Category2</td>
  </tr>
</table>

Answer 1

这是一个使用

的工作版本

添加事件监听器
隐藏
地图

它可能比您希望的更棘手，但它使用的是现代推荐方法

const rows = document.querySelectorAll("#myTable tbody tr"); // all rows with data
document.getElementById("filter").addEventListener("change", function() { // any select change
  const filters = [...this.querySelectorAll("select")].map(sel => sel.value); // make an array of values
  rows.forEach(row => { // loop over all rows
    const string = [...row.querySelectorAll("td")].map(td => td.textContent.trim()).join(" "); // join the cell content
    const found = filters.every(filter => { // every filter is looked at
      if (filter === "") return true; // it could be empty
      return string.includes(filter); // if not return true if found
    })
    row.hidden = filters.join("") != "" && !found; // hide if something was selected and not found
  })
})

<div id="filter">
  <select class='form-control' style="max-width: 250px; min-width: 250px">
    <option></option>
    <option>Author1</option>
    <option>Author2</option>
  </select>

  <select class='form-control' style="max-width: 250px; min-width: 250px">
    <option></option>
    <option>Category1</option>
    <option>Category2</option>
  </select>
</div>

<table id="myTable" height="100%" width="100%">
  <tr>
    <td>Author1, Category1</td>
  </tr>
  <tr>
    <td>Author1, Category2</td>
  </tr>
</table>

多个

const rows = document.querySelectorAll("#myTable tbody tr"); // all rows with data
document.getElementById("filter").addEventListener("change", function() { // any select change
  const selected = document.querySelectorAll('select option:checked'); 

  const filters = Array.from(selected).map(el => el.value); // make an array of values
  rows.forEach(row => { // loop over all rows
    const string = [...row.querySelectorAll("td")].map(td => td.textContent.trim()).join(" "); // join the cell content
    const found = filters.some(filter => { // every filter is looked at
      if (filter === "") return true; // it could be empty
      return string.includes(filter); // if not return true if found
    })
    row.hidden = filters.join("") != "" && !found; // hide if something was selected and not found
  })
})

<div id="filter">
  <select class='form-control' style="max-width: 250px; min-width: 250px" multiple>
    <option>Author1</option>
    <option>Author2</option>
  </select>

  <select class='form-control' style="max-width: 250px; min-width: 250px" multiple>
    <option>Category1</option>
    <option>Category2</option>
  </select>
</div>

<table id="myTable" height="100%" width="100%">
  <tr><td>Author1</td></tr>
  <tr><td>Author2</td></tr>
  <tr><td>Author3, Category1</td></tr>
  <tr><td>Category2</td></tr>
</table>

如何在一个 table 上使用多个过滤器列表 (html-select) 来缩小结果范围而不产生冲突？

How to use multiple filter lists (html-select) on one table to narrow down results without the conflicting?

javascript

html-select

html-table