尝试通过js使用一组索引进行自定义实时搜索

Question

这是我的代码。。。我基本上想做这条线(td=tr[i].querySelectorAll(".table data"([0]；(我想要这个部分。。。[0]是这样的[0.5]

这是一个样本代码

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

Answer 1

您还需要遍历每一列，并检查是否找到该值。

function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.querySelector("#myInput");
filter = input.value.toUpperCase();
table = document.querySelector("#myTable");
tr = table.querySelectorAll(".row");
for (i = 0; i < tr.length; i++) {
td = tr[i].querySelectorAll(".table-data");
if (td) {
let valid = false;
for (t = 0; t < td.length; t++) {
txtValue = td[t].textContent || td[t].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
valid = true;
}
}

if (valid) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}       
}
}