使用多个搜索框过滤单个表

时间：2018-11-29 13:49:11

标签： 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代码。

2 个答案:

答案 0 :(得分：1)

我建议在数组的外部维护过滤器状态。然后，每当设置过滤器时，都将使用新数据重新显示表。像这样：

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元素不是理想的，但是可能的。

答案 1 :(得分：0)

onkeyup="myFunction(this)"

function myFunction(that){
 var input, filter, table, tr, td, i, txtValue;
 input = that;
//rest of code
}

检查https://jsfiddle.net/mgrsf90a/4/

相关问题
最新问题