Foreach 仅循环通过表的最后一列 (ES6)

Question

我试图为电话列表构建我的第一个搜索功能。不幸的是，我的过滤器函数仅通过表格的最后一列循环。我错过了什么？或者我必须为此使用不同的方法吗？

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

看起来您正在查询错误的元素&nbsp;&nbsp;document.querySelectorAll('td').forEach((row)&nbsp;=>&nbsp;{我想你想查询行&nbsp;&nbsp;document.querySelectorAll('tr').forEach((row)&nbsp;=>&nbsp;{否则，无论最后一列的结果如何，您都将覆盖您的班级更改（并且显然将类应用于 tr 而不是 tr 的父级）

Answer 2

您的代码实际上正在遍历所有元素，但最后一列的更改覆盖了前一列的更改。假设您搜索了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');// EVENTSfunction initEvents() {&nbsp; searchInput.addEventListener('keyup', filter);}function filter(e) {&nbsp; let text = e.target.value.toLowerCase();&nbsp; console.log(text);&nbsp; // SHOW SEARCH-RESULT DIV&nbsp; if (text != '') {&nbsp; &nbsp; searchValue.textContent = text;&nbsp; &nbsp; searchResult.classList.remove('hidden');&nbsp; } else {&nbsp; &nbsp; searchResult.classList.add('hidden');&nbsp; }&nbsp; document.querySelectorAll('tr').forEach(row => {&nbsp; &nbsp; let foundMatch = false;&nbsp; &nbsp; row.querySelectorAll('td').forEach(col => {&nbsp; &nbsp; &nbsp; let item = col.textContent.toLowerCase();&nbsp; &nbsp; &nbsp; foundMatch = foundMatch || item.indexOf(text) > -1;&nbsp; &nbsp; });&nbsp; &nbsp; if (foundMatch) {&nbsp; &nbsp; &nbsp; row.style.display = 'table-row';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; row.style.display = 'none';&nbsp; &nbsp; }&nbsp; });}// ASSIGN EVENTSinitEvents();<input id="search" /><div class="phonelist">&nbsp; <div id="search-result" class="hidden">&nbsp; &nbsp; <p>Search results for <b id="search-value"></b>:</p>&nbsp; </div>&nbsp; <table class="striped">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Phone</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Fax</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Room</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>165</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>516</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1.47</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Johnathan Doe</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Sales</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>443</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>516</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1.47</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Jane Dow</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Development</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>