javascript - 使用多个搜索框过滤单个表格

标签 javascript html css

我有一个表格，但想添加更多搜索框来筛选同一个表格。 尝试添加更多搜索框和 javascript 但无法相应地过滤表格。我想(例如)查看哪些“BUCO”公司将“EOH”作为二级服务提供商。

请看下面的代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}


#myInput {
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}
</style>
</head>
<body>


  <h1>Site Configuration Management</h1>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for branch.." title="Search branch">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for company.." title="Search company">


<table id="myTable">
  <tr class="header">
    <th style="width:4%;">Company</th>
    <th style="width:9%;">Branch Name</th>
    <th style="width:1%;">AD Site Number</th>
    <th style="width:4%;">Site Server Name</th>
    <th style="width:4%;">Primary Provider</th>
    <th style="width:1%;">Primary Type</th>
    <th style="width:4%;">Primary Line Speed</th>
    <th style="width:4%;">Primary Circuit Number</th>
    <th style="width:4%;">Secondary Primary Provider</th>
    <th style="width:4%;">Secondary Type</th>
    <th style="width:4%;">Secondary Line Speed</th>
    <th style="width:4%;">Secondary Circuit Number</th>
    <th style="width:4%;">Voice Telephony Provider</th>
    <th style="width:4%;">Email Notification Group</th>
    <th style="width:4%;">IT Co-Ordinator</th>
    <th style="width:4%;">Store Operator</th>
    <th style="width:4%;">Store Landline Number</th>
    <th style="width:16%;">Physical Address</th>
    <th style="width:4%;">Mon - Fri</th>
    <th style="width:4%;">Sat</th>
    <th style="width:4%;">Sun</th>
    <th style="width:4%;">Public Holidays</th>
  </tr>
  <tr>
    <td>BILDWARE</td>
    <td>Bildware Durban</td>
    <td>1178</td>
    <td>1178fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>770162222</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>671495466</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Arcadia</td>
    <td>1172</td>
    <td>1172fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>730343022</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632945266</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Faerie Glenn</td>
    <td>1173</td>
    <td>1173fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>730343822</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632944866</td>
    <td>Telkom</td>
    <td>1172@steinbuild.com</td>
    <td>467564745</td>
    <td>45674567457</td>
    <td>657675464</td>
    <td>5675467456, Gauteng, 0083</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Northlands</td>
    <td>1199</td>
    <td>1199fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>740510222</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>642418266</td>
    <td>Telkom</td>
    <td>64745674</td>
    <td>5476457</td>
    <td>567457</td>
    <td>467457645</td>
    <td>5674764</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Acornhoek</td>
    <td>1056</td>
    <td>1056fp01</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632726066</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632950666</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>07h30 - 16h30</td>
    <td>07h30 - 12h30</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Alice</td>
    <td>0024</td>
    <td>No Server</td>
    <td>EOH NS</td>
    <td>ADSL</td>
    <td>1mbps</td>
    <td>406530082</td>
    <td>EOH NS</td>
    <td>3G - Metacom</td>
    <td></td>
    <td>40240155</td>
    <td>Telkom</td>
    <td>4576567</td>
    <td>547567</td>
    <td>M547546754</td>
    <td>5674575</td>
    <td>5745675476</td>
    <td>08h00 - 17h00</td>
    <td>08h00 - 13h00</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Athlone</td>
    <td>1166</td>
    <td>1166fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>4574574576</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>611581666</td>
    <td>Telkom</td>
    <td>567457645</td>
    <td>457456745</td>
    <td>5476547</td>
    <td>45674574</td>
    <td>5674456745</td>
    <td>07h30 - 17h00</td>
    <td>07h30 - 13h00</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Bergvliet</td>
    <td>1165</td>
    <td>1165fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td></td>
    <td>710204322</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>611581866</td>
    <td>Telkom</td>
    <td>457576645</td>
    <td>457657645</td>
    <td>5474567457</td>
    <td>021 696 5167</td>
    <td>54674567457</td>
    <td>07h30 - 17h00</td>
    <td>08h00 - 13h00</td>
    <td>Closed</td>
    <td>08h00 - 13h00</td>
  </tr>
</table>


<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}



</script>

我正在使用 Visual Studio Code。

最佳答案

我建议在数组外部维护过滤器状态。然后每当设置过滤器时，重新显示包含新数据的表格。像这样的东西:

let filters = ["",""];

function setFilter(thisInput, thisIndex) {
  filters[thisIndex] = thisInput.value.toUpperCase();
  
  filterTable();
}

function filterTable() {
  var table = document.getElementById("myTable");
  var rows = Object.values(table.getElementsByTagName("tr"));
  
  for(var rowItr=1; rowItr < rows.length; rowItr++) {
    var row = rows[rowItr];
    var cells = Object.values(row.getElementsByTagName("td"));
    
    
    var isRowVisible = filters.every((filter, filterIndex) => {
        var cell = cells[filterIndex];
        var txtValue = cell.textContent || cell.innerText;

        return filter === "" || txtValue.toUpperCase().indexOf(filter) > -1;
    });
    
    row.style.display = isRowVisible ? "" : "none";
  };
}
* {
  box-sizing: border-box;
}

.myInput {
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}
<h1>Site Configuration Management</h1>

<input type="text" class="myInput" onkeyup="setFilter(this, 0)" placeholder="Search for branch.." title="Search branch">
<input type="text" class="myInput" onkeyup="setFilter(this, 1)" placeholder="Search for company.." title="Search company">


<table id="myTable">
  <tr class="header">
    <th style="width:4%;">Company</th>
    <th style="width:9%;">Branch Name</th>
    <th style="width:1%;">AD Site Number</th>
    <th style="width:4%;">Site Server Name</th>
    <th style="width:4%;">Primary Provider</th>
    <th style="width:1%;">Primary Type</th>
    <th style="width:4%;">Primary Line Speed</th>
    <th style="width:4%;">Primary Circuit Number</th>
    <th style="width:4%;">Secondary Primary Provider</th>
    <th style="width:4%;">Secondary Type</th>
    <th style="width:4%;">Secondary Line Speed</th>
    <th style="width:4%;">Secondary Circuit Number</th>
    <th style="width:4%;">Voice Telephony Provider</th>
    <th style="width:4%;">Email Notification Group</th>
    <th style="width:4%;">IT Co-Ordinator</th>
    <th style="width:4%;">Store Operator</th>
    <th style="width:4%;">Store Landline Number</th>
    <th style="width:16%;">Physical Address</th>
    <th style="width:4%;">Mon - Fri</th>
    <th style="width:4%;">Sat</th>
    <th style="width:4%;">Sun</th>
    <th style="width:4%;">Public Holidays</th>
  </tr>
  <tbody>
  <tr>
    <td>BILDWARE</td>
    <td>Bildware Durban</td>
    <td>1178</td>
    <td>1178fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>770162222</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>671495466</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Arcadia</td>
    <td>1172</td>
    <td>1172fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>730343022</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632945266</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Faerie Glenn</td>
    <td>1173</td>
    <td>1173fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>730343822</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632944866</td>
    <td>Telkom</td>
    <td>1172@steinbuild.com</td>
    <td>467564745</td>
    <td>45674567457</td>
    <td>657675464</td>
    <td>5675467456, Gauteng, 0083</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCHEL</td>
    <td>Buchel Northlands</td>
    <td>1199</td>
    <td>1199fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>740510222</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>642418266</td>
    <td>Telkom</td>
    <td>64745674</td>
    <td>5476457</td>
    <td>567457</td>
    <td>467457645</td>
    <td>5674764</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Acornhoek</td>
    <td>1056</td>
    <td>1056fp01</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632726066</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>632950666</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>07h30 - 16h30</td>
    <td>07h30 - 12h30</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Alice</td>
    <td>0024</td>
    <td>No Server</td>
    <td>EOH NS</td>
    <td>ADSL</td>
    <td>1mbps</td>
    <td>406530082</td>
    <td>EOH NS</td>
    <td>3G - Metacom</td>
    <td></td>
    <td>40240155</td>
    <td>Telkom</td>
    <td>4576567</td>
    <td>547567</td>
    <td>M547546754</td>
    <td>5674575</td>
    <td>5745675476</td>
    <td>08h00 - 17h00</td>
    <td>08h00 - 13h00</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Athlone</td>
    <td>1166</td>
    <td>1166fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td>2mbps</td>
    <td>4574574576</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>611581666</td>
    <td>Telkom</td>
    <td>567457645</td>
    <td>457456745</td>
    <td>5476547</td>
    <td>45674574</td>
    <td>5674456745</td>
    <td>07h30 - 17h00</td>
    <td>07h30 - 13h00</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <td>BUCO</td>
    <td>BUCO Bergvliet</td>
    <td>1165</td>
    <td>1165fp01</td>
    <td>Telkom</td>
    <td>ME</td>
    <td></td>
    <td>710204322</td>
    <td>Telkom</td>
    <td>ADSL</td>
    <td>2mbps</td>
    <td>611581866</td>
    <td>Telkom</td>
    <td>457576645</td>
    <td>457657645</td>
    <td>5474567457</td>
    <td>021 696 5167</td>
    <td>54674567457</td>
    <td>07h30 - 17h00</td>
    <td>08h00 - 13h00</td>
    <td>Closed</td>
    <td>08h00 - 13h00</td>
  </tr>
  </tbody>
</table>

相当多的变化，但快速概览:

  • 在输入更改时调用 setFilter 并设置过滤器文本/列索引
  • 更改后调用 filterTable 循环所有行(除了标题因此 rowItr 从 1 开始)
  • 使用 .every 循环所有过滤器，并将过滤器与当前行的匹配单元格进行比较
  • 设置行的可见性

这是一个有趣的练习，但老实说，我建议做两件事:

  1. 查看表/DataTable 库以避免重新创建此轮子。
  2. 以对象格式存储所有这些数据并在过滤后重新呈现页面。一般来说，使用业务逻辑(如过滤)处理 DOM 元素并不理想，但有可能。

关于javascript - 使用多个搜索框过滤单个表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53540525/

上一篇：javascript - 尝试并排显示缩略图 img 与 css 显示 : inline-block

下一篇：html - 在 DIV 内的 DIV 元素之间创建半个边框

相关文章：

javascript - 如何销毁 RTCPeerConnection？

href 属性中的 JavaScript 函数调用

c# - ASPX 页面中的用户控件无法使用 javascript

javascript - 检查 not null 不使用 localStorage

html - 在移动设备上滚动时，CSS 全屏背景在底部显示白条

html - 使行尾的箭头与行中的最后一个单词保持联系

javascript - 我想在 Javascript/Jquery 函数中使用异常处理

javascript - 如何设置站点/视口(viewport)的最小宽度，并在宽度低于该宽度时使用浏览器缩放

javascript - 使用 CSS 模块的 Next.JS 无法按预期工作

html - css 获取 float div 以垂直堆叠

©2024 IT工具网  联系我们