Цикл Foreach только через последний столбец таблицы (ES6) - PullRequest
Новая
       33

Цикл Foreach только через последний столбец таблицы (ES6)

0 голосов
/ 18 октября 2019

Я пытался создать свою первую функцию поиска для фонелиста. К сожалению, похоже, моя функция фильтра зацикливается только на последний столбец таблицы. Я что-то пропустил? Или я должен использовать другой подход для этого?

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>

Ответы [ 2 ]

0 голосов
/ 18 октября 2019

похоже, что вы запрашиваете не тот элемент 

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

Я думаю, что вы хотите запросить строку 

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

в противном случае вы переопределяете изменения класса любымрезультат последнего столбца

(и, очевидно, применять класс к tr, а не к родительскому элементу tr)

0 голосов
/ 18 октября 2019

Ваш код фактически проходит через все элементы, но изменения из последнего столбца заменяют изменения по сравнению с предыдущими столбцами.

Допустим, вы искали dow, 4-й столбец 2-й строки соответствует и показывает родительский элементно после этого ваш цикл переходит во 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>
...