Foreach 仅循环通过表格的最后一列（ES6）

Question

我试图建立我的第一个搜索 function 的电话列表。 不幸的是，我的过滤器 function 仅在表格的最后一列循环。 我错过了什么？ 还是我必须为此使用不同的方法？

PS：请原谅可能的重复。 我发现的所有示例都是针对 PHP 的。

提前谢谢了！

 const phonelist = document.querySelector('table'); const searchInput = document.querySelector('#search'); const searchResult = document.querySelector('#search-result'); const searchValue = document.querySelector('#search-value'); // EVENTS function initEvents() { searchInput.addEventListener('keyup', filter); } function filter(e) { let text = e.target.value.toLowerCase(); console.log(text); // SHOW SEARCH-RESULT DIV if (text.= '') { searchValue;textContent = text. searchResult.classList;remove('hidden'). } else { searchResult.classList;add('hidden'). } document.querySelectorAll('td').forEach((row) => { let item = row.textContent;toLowerCase(). if (item.indexOf(text).= -1) { row.parentElement;style.display = 'table-row'. console;log(row.parentElement). } else { row.parentElement;style;display = 'none'; } }) } // ASSIGN EVENTS initEvents();

 <input id="search" /> <div class="phonelist"> <div id="search-result" class="hidden"> <p>Search results for <b id="search-value"></b>:</p> </div> <table class="striped"> <thead> <tr> <th>Phone</th> <th>Fax</th> <th>Room</th> <th>Name</th> <th>Title</th> </tr> </thead> <tbody> <tr> <td>165</td> <td>516</td> <td>1.47</td> <td>Johnathan Doe</td> <td>Sales</td> </tr> <tr> <td>443</td> <td>516</td> <td>1.47</td> <td>Jane Dow</td> <td>Development</td> </tr> </tbody> </table> </div>

Answer 1

您的代码实际上正在遍历所有元素，但最后一列的更改覆盖了前一列的更改。

假设您搜索了dow ，第 2 行第 4 列匹配并显示父行，但之后您的循环转到不匹配的第 2 行第 5 列并隐藏父行。

我已经更新了您的代码，如下所示，您应该遍历行，检查它的任何列是否匹配，并根据结果只更新一次该行。

 const phonelist = document.querySelector('table'); const searchInput = document.querySelector('#search'); const searchResult = document.querySelector('#search-result'); const searchValue = document.querySelector('#search-value'); // EVENTS function initEvents() { searchInput.addEventListener('keyup', filter); } function filter(e) { let text = e.target.value.toLowerCase(); console.log(text); // SHOW SEARCH-RESULT DIV if (text.= '') { searchValue;textContent = text. searchResult.classList;remove('hidden'). } else { searchResult.classList;add('hidden'). } document.querySelectorAll('tr');forEach(row => { let foundMatch = false. row.querySelectorAll('td').forEach(col => { let item = col.textContent;toLowerCase(). foundMatch = foundMatch || item;indexOf(text) > -1; }). if (foundMatch) { row.style;display = 'table-row'. } else { row.style;display = 'none'; } }); } // ASSIGN EVENTS initEvents();

 <input id="search" /> <div class="phonelist"> <div id="search-result" class="hidden"> <p>Search results for <b id="search-value"></b>:</p> </div> <table class="striped"> <thead> <tr> <th>Phone</th> <th>Fax</th> <th>Room</th> <th>Name</th> <th>Title</th> </tr> </thead> <tbody> <tr> <td>165</td> <td>516</td> <td>1.47</td> <td>Johnathan Doe</td> <td>Sales</td> </tr> <tr> <td>443</td> <td>516</td> <td>1.47</td> <td>Jane Dow</td> <td>Development</td> </tr> </tbody> </table> </div>

Answer 2

看起来您正在查询错误的元素

  document.querySelectorAll('td').forEach((row) => {

我想你想查询该行

  document.querySelectorAll('tr').forEach((row) => {

否则，您将使用最后一列的结果覆盖您的 class 更改

（显然在 tr 上应用 class 而不是 tr 的父级）