JS：for 循环中的当前节点

Question

我有以下 HTML 代码：

 <input type="text" id="X1" onkeyup="xFilter()"/> <table id="table1" class="sort"> <tr> <td>X: A</td> <td>Y: A</td> <td>Z: A</td> </tr> <tr> <td>X: B</td> <td>Y: B</td> <td>Z: B</td> </tr> </table> <input type="text" id="X2" onkeyup="xFilter()"/> <table id="table2" class="sort"> <tr> <td>X: A</td> <td>Y: A</td> <td>Z: A</td> </tr> <tr> <td>X: B</td> <td>Y: B</td> <td>Z: B</td> </tr> </table>

我想每次都用函数 xFilter() 过滤表列 X。 一个例子：我在第一个输入窗口 (id="X1") 中输入 "A" 并获得第一个表的第一行 (id="1")。 第二个表保持不变。 另一个例子：我在第二个输入窗口 (id="X2") 中输入 "B" 并获取第二个表中的第二行 (id="2")。 第一个表保持不变。

下面的代码工作正常，但不够精简，因为我的页面上有很多带有很多过滤选项的表格。

 function XFilter1() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("X1"); filter = input.value.toUpperCase(); table = document.getElementById("table1"); 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"; } } } } function xFilter2() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("X2"); filter = input.value.toUpperCase(); table = document.getElementById("table2"); 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"; } } } }

现在，当我尝试合并这两个函数时，根本没有任何作用，不幸的是我没有看到我的错误。 由于我刚刚开始使用 JavaScript，我希望您的支持从我的错误中吸取教训。 已经非常感谢了。

 function gpvFilter() { var tables = document.querySelectorAll("table.sortierbar"); var inputs = document.querySelectorAll("input.gpvInput"); for (i = 0; i < tables.length; i++) { var input = inputs[i]; var filter = input.value.toUpperCase(); var table = tables[i]; var tr = table.getElementsByTagName("tr"); for (j = 0; j < tr.length; j++) { var td = tr[j].getElementsByTagName("td")[1]; if (td) { var txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

Answer 1

这是一个可以解决问题的本土过滤器。 为了将输入与表相关联，我将它们放在同一个 div 中并使用了closest('div').querySelector('table')

 window.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.t-filter').forEach(el => el.addEventListener('input', e => { // for each of the inputs with class .t-filter... let trs = e.target.closest('div').querySelector('table').querySelectorAll('tr'); // gather together all the <tr>'s in the closest table to me trs.forEach(tr => { let match = false // iterate through each tr. Set match to false as a default tr.querySelectorAll('td').forEach(td => { if (td.innerText.toLowerCase().includes(e.target.value.toLowerCase())) match = true; }); // in this tr, iterate through all of it's td tags. If the innerText of any one of them contains the search term (case insensitive) set match to true if (match || e.target.value.trim() === '') tr.removeAttribute('hidden'); else tr.setAttribute('hidden', true); // if there is a match, or we've cleared our input remove the hidden attribute from the tr // otherwise add the hidden attribute to the tr }); })) })

 <div> <input type="text" class='t-filter' id="X1" /> <table id="table1" class="sort"> <tr> <td>X: A</td> <td>Y: A</td> <td>Z: A</td> </tr> <tr> <td>X: B</td> <td>Y: B</td> <td>Z: B</td> </tr> </table> </div> <div> <input type="text" class='t-filter' id="X2" /> <table id="table2" class="sort"> <tr> <td>X: A</td> <td>Y: A</td> <td>Z: A</td> </tr> <tr> <td>X: B</td> <td>Y: B</td> <td>Z: B</td> </tr> </table> </div>