个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有一个表格，但想添加更多搜索框来筛选同一个表格。尝试添加更多搜索框和 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 循环所有过滤器，并将过滤器与当前行的匹配单元格进行比较这是一个有趣的练习，但老实说，我建议做两件事:
关于javascript - 使用多个搜索框过滤单个表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53540525/
25
4
0
场景 网站页面有一个带有分页、过滤、排序功能的表格 View 。 表中的数据是从REST API服务器获取的，数据包含数百万条记录。 数据库 REST API 服务器 Web 服务器 浏览器 问
我有一个表student，其中的列dte_date(日期)具有值(2019-01-01、2019-02-01、2019-03-01)。 .等) 条件: dte_date 列中没有重复值。 但 dte_
我有一些逻辑可以根据不活动的用户创建通知。我正在获取具有以下属性的用户列表。我想做的只是在部门有非 Activity 用户时触发我的创建通知方法。因此，给出下面的列表，基本上会创建 1 个通知，表示部
使用 GPS 开发跟踪应用程序。一切都很好，但有时由于封闭区域或恶劣天气，我得到的分数不准确。当您绘制它们时，它看起来不对，有很多跃点/跳跃。 我应该运行什么算法来过滤掉不良信号对我来说，这看起来像是
我正在尝试按变量类型过滤对象数组。节点是一个具有位置的对象，但以不同的方式定义——作为点、矢量或附件。这是一个代码: class Joint { var position:Position
我想做的是在向量上创建一个过滤器，以便它删除未通过谓词测试的元素；但不太确定我该怎么做。 我根据谓词评估输入向量中的每个元素，例如在我的代码中，is_even 仿函数在 device_vector 向
我是 Gremlin 的新手，我正在使用 Gremlin 3.0.2 和 Stardog 5.0。我编写此查询是为了找出 schema.org 本体中两个实体之间的路径。以下是输出 - gremlin
考虑以下示例数据表， dt 30 的那一行需要去 - 或者如果其中两行 > 30相隔几秒钟，删除所有 3 个。然而 ，当我们有 4 行或更多行时，我们需要删除时间差 > 30 没有另一对 < 30
我正在考虑使用 ZeroMQ，并尝试了一些示例。但是，我无法验证 ZeroMQ 是否支持一些重要的要求。我希望你能帮助我。 我将使用这个简单的场景来问我的问题: 出版商(例如交易所)提供(大量)股票的
我需要从我的查询中过滤掉大量的对象。目前，它正在抓取类中的所有对象，我想将其过滤为查询字符串中的相关对象。我怎样才能做到这一点？当我尝试时，我收到一个属性错误说明 ''QuerySet' object
如何在 Prometheus 查询中添加标签过滤器？ kube_pod_info kube_pod_info{created_by_kind="ReplicaSet",created_by_name=
我有包含字符串的列的数据框，并希望过滤掉包含某些字符串以外的任何内容的所有行。考虑下面的简化示例: string % dplyr::filter(stringr::str_detect(string,
我有以下数据框，其中包含多行的角度变化值: 'data.frame': 712801 obs. of 4 variables: $ time_passed: int 1 2 3 4 5 6
我有一个 BehaviorSubject我希望能够filter ，但要保持新订阅者在订阅时始终获得一个值的行为主题式质量，即使最后发出的值被过滤掉。有没有一种简洁的方法可以使用 rxjs 的内置函数来
我有一个 RSS 提要，每天输出大约 100 篇文章。我希望过滤它以仅包含更受欢迎的链接，也许将其过滤到 50 个或更少。回到当天，我相信您可以使用“postrank”来做到这一点，但在谷歌收购后现已
我有这样一个重复的xml树- this is a sample xml file yellowred blue greyredblue 如您所见，每个项目可以具有不同数量的颜色标签
我以为我在 Haskell 学习中一帆风顺，直到... 我有一个 [[Int]] tiles = [[1,0,0] ,[0,1,0] ,[0,1,0]
我在使用 Knockout.js 过滤可观察数组时遇到问题 我的js: 包含数据的数组 var docListData = [ { name: "Article Name 1", info:
我在 mongoDB 中有这个架构: var CostSchema = new Schema({ item: String, value: Number }); var Attachm
给定一个数据框“foo”，我如何才能只选择“foo”中的那些行，例如foo$location =“那里”？ foo = data.frame(location = c("here", "there",
我是一名优秀的程序员,十分优秀！