javascript - 如何让搜索过滤器循环遍历库存项目表中的 MULTIPLE 数据类型,并缩小显示的结果范围?
问题描述
如果我使用了错误的术语,请原谅。
我在一个 php 文件中有工作的 javascript 代码,它过滤了 WordPress 页面前端的库存项目表中显示的数据。
即按序列号搜索,您键入的越多,WordPress 前端显示的项目就越少,直到找到一个唯一项目。
客户希望能够以多种方式进行搜索 - 我可以更改正在搜索的单个主题,例如我可以通过调度号、序列号、资产类型、描述等进行搜索,但无法让搜索查看所有的话题。即代码中的id只允许我选择其中一个元素
如果我将此处的“1”更改为“2”或“3”等,它将搜索焦点从第 1 列更改为 2 到 3 等。
td = tr[i].getElementsByTagName("td")[1];
谁能建议如何同时搜索所有数据?
<script>
function helloWorld() {
var input, filter, table, tr, td, sn, ty, own, i, id;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("adminTable");
tr = table.getElementsByTagName("tr");
var data = new Array();
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if(td.children[0].checked) {
sn = tr[i].getElementsByTagName("td")[4];
ty = tr[i].getElementsByTagName("td")[9];
id = tr[i].getElementsByTagName("td")[10];
own = tr[i].getElementsByTagName("td")[11];
var record = {serial: sn.textContent || sn.innerText, type: ty.textContent || ty.innerText, id: id.textContent || id.innerText, owner: own.textContent || own.innerText};
data.push(record);
}
}
}
if(data.length > 0) {
var uri = JSON.stringify(data);
var res = encodeURIComponent(uri);
window.location.href = '../stock?transferData='.concat(res);
}
}
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("adminTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
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>
解决方案
尝试这个:
代替
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";
}
}
}
这样
(在 [1,4,5] 列表中设置您需要的列号)
var columns = [1,4,5];
// Loop through all table rows, and hide those who don't match the search query
for (var j=0, lenj=columns.length; j < lenj; j++) {
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[columns[j]];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
推荐阅读
- java - 为什么在 Spring Boot 中检索 mysql 视图时出现“未知列”错误?
- reactjs - 使用打字稿自定义反应日期选择器
- salesforce - LWC 将列表参数传递给 Apex 控制器
- django - 模型A的方法引用模型B是pythonic/Djangoic吗?
- python - 在 python 脚本中运行 CMD 行
- nginx - 未通过拉取 RTMP 流生成 HLS 文件(.m3u8、.ts)
- object-detection - YOLO网格是用来检测多个物体的,那为什么不把整张图片当成一个大网格呢?
- loops - Dart:如果在foreach循环中退出函数
- c - 我的链表简单代码似乎是错误的,但我不知道这段代码的错误在哪里
- jquery - 如何使用 jquery 向 simpleform 复选框集合添加选项?