猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

HTML 表格多列过滤器

我有一个包含三列的 HTML 表 - （姓名、年龄、城市）。我正在尝试实现“MS Excel”就像功能一样，我可以在其中过滤多个列。

尽管过滤器是单独工作的，但当用户同时在多个输入字段中输入文本时，它们会发生故障。例如，仅输入名称即可正常工作，但输入名称和城市将完全排除名称过滤器。

function nameSearch() {

  var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;


  input_name = document.getElementById("name-search");

  input_age = document.getElementById("age-search");

  input_city = document.getElementById("city-search");


  filter_name = input_name.value.toUpperCase();

  filter_age = input_age.value.toUpperCase();

  filter_city = input_city.value.toUpperCase();



  table = document.getElementById("custom-table");

  tr = table.getElementsByTagName("tr");


  for (i = 0; i < tr.length; i++) {

    td_name = tr[i].getElementsByTagName("td")[0];

    if (td_name) {

      txtValue_name = td_name.textContent || td_name.innerText;

      if (txtValue_name.toUpperCase().indexOf(filter_name) > -1) {

        tr[i].style.display = "";

      } else {

        tr[i].style.display = "none";

      }


    }

  }

}


function ageSearch() {

  var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;


  input_name = document.getElementById("name-search");

  input_age = document.getElementById("age-search");

  input_city = document.getElementById("city-search");


  filter_name = input_name.value.toUpperCase();

  filter_age = input_age.value.toUpperCase();

  filter_city = input_city.value.toUpperCase();



  table = document.getElementById("custom-table");

  tr = table.getElementsByTagName("tr");


  for (i = 0; i < tr.length; i++) {

    td_age = tr[i].getElementsByTagName("td")[1];

    if (td_age) {

      txtValue_age = td_age.textContent || td_age.innerText;

      if (txtValue_age.toUpperCase().indexOf(filter_age) > -1) {

        tr[i].style.display = "";

      } else {

        tr[i].style.display = "none";

      }


    }

  }

}

而不是拥有三个单独的“onkeyup”；函数时，我还尝试将所有输入映射到单个函数，但这仍然没有多大帮助。


萧十郎
浏览 79回答 4
4回答

鸿蒙传说

不需要为每个输入使用单独的 onKeyUp 处理程序。只需一个处理程序就足够了。不是通过标签“td”获取元素，而是通过标签“td”获取元素。&nbsp;tr[i].getElementsByTagName("td")，使用tr[i].cells和table.rows获取行（来自gman的评论）代替&nbsp;tr =table.getElementsByTagName("tr");&nbsp; &nbsp; &nbsp; tr = table.rows;&nbsp; &nbsp; &nbsp; for (let i = 0; i < tr.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; td= tr[i].cells;&nbsp; &nbsp; &nbsp; &nbsp; td_name =td[0].innerText;&nbsp; &nbsp; &nbsp; &nbsp; td_age = td[1].innerText;&nbsp; &nbsp; &nbsp; &nbsp; td_city = td[2].innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (td_name.toUpperCase().indexOf(filter_name) > -1 && td_age.toUpperCase().indexOf(filter_age) > -1 && td_city.toUpperCase().indexOf(filter_city) > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "none";&nbsp; &nbsp; &nbsp; }var input_name = document.getElementById("name-search");var input_age = document.getElementById("age-search");var input_city = document.getElementById("city-search");var table = document.getElementById("custom-table");function search() {&nbsp; let filter_name = input_name.value.toUpperCase();&nbsp; let filter_age = input_age.value.toUpperCase();&nbsp; let filter_city = input_city.value.toUpperCase();&nbsp; let tr = table.rows;&nbsp; for (let i = 0; i < tr.length; i++) {&nbsp; &nbsp; td = tr[i].cells;&nbsp; &nbsp; td_name = td[0].innerText;&nbsp; &nbsp; td_age = td[1].innerText;&nbsp; &nbsp; td_city = td[2].innerText;&nbsp; &nbsp; if (td_name.toUpperCase().indexOf(filter_name) > -1 && td_age.toUpperCase().indexOf(filter_age) > -1 && td_city.toUpperCase().indexOf(filter_city) > -1) {&nbsp; &nbsp; &nbsp; tr[i].style.display = "";&nbsp; &nbsp; } else&nbsp; &nbsp; &nbsp; tr[i].style.display = "none";&nbsp; }}table,td,th {&nbsp; border: 1px solid black;&nbsp; border-collapse: collapse;&nbsp; padding: 10px;&nbsp; margin-top: 20px;}<!DOCTYPE html><html><head>&nbsp; <title></title>&nbsp; <link rel="stylesheet" type="text/css" href="main.css"></head><body>&nbsp; <input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters">&nbsp; <input type="text" id="age-search" onkeyup="search()" placeholder="Age.." class="table-search-filters">&nbsp; <input type="text" id="city-search" onkeyup="search()" placeholder="City.." class="table-search-filters">&nbsp; <table id="custom-table">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; <th>City</th>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Bruce</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Bane</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Chicago</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Joker</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>28</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Harvey</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>30</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Miami</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></body></html>
0

慕田峪7331174

因此，您需要为每个过滤器创建一个过滤函数。您可以使用&nbsp;startsWith、includes&nbsp;或&nbsp;===&nbsp;来实现不同的搜索行为。接下来，您需要创建一个“主”文件过滤器将调用所有其他过滤器。然后向父元素添加一个事件侦听器（在我的片段中，我将其添加到&nbsp;window&nbsp;对象）以防止多个事件侦听器。当事件发生时，检查其目标并在需要时调用主过滤器函数。一些明显的特征：自定义过滤行为易于测试的纯函数可组合的主过滤器函数没有必要的混乱=）（有争议）const sourceList = Array.from(document.querySelectorAll("tbody tr"));const nameFilter = (value, item) => !value || item.querySelector("td:nth-child(1)").textContent.toLowerCase().includes(value.toLowerCase());const ageFilter = (value, item) => !value || item.querySelector("td:nth-child(2)").textContent.startsWith(value);const cityFilter = (value, item) => !value || item.querySelector("td:nth-child(3)").textContent.toLowerCase().includes(value.toLowerCase());const mainFilter = ({name, age, city}, item) => {&nbsp; return nameFilter(name, item) && ageFilter(age, item) && cityFilter(city, item);}const currentFilters = {&nbsp; name: '',&nbsp; age: '',&nbsp; city: '',};window.addEventListener('input', event => {&nbsp; if (event.target.matches('.table-search-filters')) {&nbsp;&nbsp;&nbsp; &nbsp; currentFilters[event.target.name] = event.target.value;&nbsp; &nbsp;&nbsp; &nbsp; sourceList.forEach(item => {&nbsp; &nbsp; &nbsp; const isVisible = mainFilter(currentFilters, item);&nbsp; &nbsp; &nbsp; item.style.display = !isVisible ? 'none' : 'inherit';&nbsp; &nbsp; })&nbsp; }})const table = document.querySelector('table');<input name="name" type="text" id="name-search" placeholder="Name.." class="table-search-filters"><input name="age" type="text" id="age-search" placeholder="Age.." class="table-search-filters"><input name="city" type="text" id="city-search" placeholder="City.." class="table-search-filters">&nbsp; &nbsp; <table id="custom-table">&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>City</th>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bruce</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bane</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Chicago</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Joker</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>28</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Harvey</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>30</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Miami</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>
0

MMMHUHU

您可以将三个函数合并为一个，然后仅使用 and(&&) 检查条件。希望下面的代码有帮助。索引.html<!DOCTYPE html><html><head>&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="main.css"></head><body>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="age-search" onkeyup="search()" placeholder="Age.." class="table-search-filters">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="city-search" onkeyup="search()" placeholder="City.." class="table-search-filters">&nbsp; &nbsp; <table id="custom-table">&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>City</th>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bruce</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bane</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>32</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Chicago</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Joker</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>28</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Gotham</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Harvey</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>30</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Miami</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>&nbsp; &nbsp; <script type="text/javascript" src="script.js"></script></body></html>脚本.jsfunction search() {&nbsp; &nbsp; var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;&nbsp; &nbsp; input_name = document.getElementById("name-search");&nbsp; &nbsp; input_age = document.getElementById("age-search");&nbsp; &nbsp; input_city = document.getElementById("city-search");&nbsp; &nbsp; filter_name = input_name.value.toUpperCase();&nbsp; &nbsp; filter_age = input_age.value.toUpperCase();&nbsp; &nbsp; filter_city = input_city.value.toUpperCase();&nbsp; &nbsp; table = document.getElementById("custom-table");&nbsp; &nbsp; tr = table.getElementsByTagName("tr");&nbsp; &nbsp; for (i = 0; i < tr.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; td_city = tr[i].getElementsByTagName("td")[2];&nbsp; &nbsp; &nbsp; &nbsp; td_age = tr[i].getElementsByTagName("td")[1];&nbsp; &nbsp; &nbsp; &nbsp; td_name = tr[i].getElementsByTagName("td")[0];&nbsp; &nbsp; &nbsp; &nbsp; if(td_city && td_age && td_name){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; txtValue_city = td_city.textContent || td_city.innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; txtValue_age = td_age.textContent || td_age.innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; txtValue_name = td_name.textContent || td_name.innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (txtValue_city.toUpperCase().indexOf(filter_city) > -1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && txtValue_age.toUpperCase().indexOf(filter_age) > -1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && txtValue_name.toUpperCase().indexOf(filter_name) > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}
0

杨魅力

如果您想包含标头，请更改为包含 class = header 或更改为<tr class="header">            <th>Name</th>            <th>Age</th>            <th>City</th></tr>里面并在 *.js 文件中使用这行代码tr = table.querySelectorAll("tbody tr:not(.header)");
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5