调整表过滤器 Javascript

Question

我正在尝试调整一些当前允许用户在输入中输入文本的javascript，然后它会隐藏所有不包含该文本的行。现在它只检查第一列，但我希望它检查第 1 列和第 2 列：

.HTML：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:20%;">Country</th>
<th style="width:20%;">Size</th>
</tr>
<tr>
<td>Joe Smith</td>
<td>Canada</td>
<td>Medium</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Germany</td>
<td>Small</td>
</tr>
</table>
So in the simple example below, you could type either Jane or Germany to have that row show filter.

JAVASCRIPT：

<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")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}       
}
}
</script>

Answer 1

试试这个：

for (i = 0; i < tr.length; i++) {
var found = false;
for (j = 0; j < 3; j++){
td = tr[i].getElementsByTagName("td")[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
}
if (found) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}

在列上创建一个内部循环，检查每列。找到文本后，中断循环。循环后，检查找到的属性，设置路由显示。