Foreach 仅循环遍历 table (ES6) 的最后一列

Question

我正在尝试为电话列表构建我的第一个搜索功能。不幸的是，我的过滤函数看起来只循环遍历 table 的最后一列。我错过了什么？或者我必须为此使用不同的方法吗？

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 而不是 tr 的父级上应用 class）

Foreach 仅循环遍历 table (ES6) 的最后一列

Foreach loops only through the last column of the table (ES6)

javascript

foreach

search

filter

jquery-selectors