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');// EVENTSfunction 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 EVENTSinitEvents();<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

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

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

我想你想查询行

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

否则，无论最后一列的结果如何，您都将覆盖您的班级更改

（并且显然将类应用于 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');

// 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>