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 的父級）