Фильтрация таблицы

68
15 января 2022, 19:20

На странице есть таблица, сверстанная div'ами, есть скрипт который фильтрует эту таблицу, при вводе необходимого значения в поле #searchInput, но суть в том, что в таблице изначально, при загрузке страницы, есть строки, которые скрыты свойством display:none, и если воспользоваться фильтром и потом стереть текст из фильтра, то отображаются все строки, даже те которые были скрыты при загрузке страницы. Можно ли это как-то обойти и скрывать/отображать только строки, которые не были изначально скрыты

let input = document.querySelector("#searchInput");
let arrData = document.getElementsByClassName('trading__market-table-row');
input.addEventListener('blur', showChoice);
function showChoice(event){
let value = event.target.value;
if (value === ""){
    for (let i=0; i<arrData.length; i++){
        let item = arrData[i]
        item.style.display = ""
    }
    return
}
for (let i=0; i<arrData.length; i++){
    let item = arrData[i]
    if (item.id !== value) {
        item.style.display = "none"
    } else {
        item.style.display = ""
    }
}
}
Answer 1

Вы можете заранее отфильтровать полученные строки и оставить только не скрытые и уже по ним проводить поиск. JSFiddle

const rowsWithoutHidden = rows.filter((row) => {
if (!row.classList.contains('hidden')) {
return row;

} })

READ ALSO
Js (jquery) не проверяет &quot;windows width&quot; при открытии сайта

Js (jquery) не проверяет "windows width" при открытии сайта

Когда я изменяю размер окна в chrome, то ссылка изменяется, а когда и сразу открываю сайт в этом разрешении, то он не работает, вот он сам:

44
Как редактировать embed message? [Discord.js]

Как редактировать embed message? [Discord.js]

Как можно отредактировать embed в ранее отправленном сообщении с embed? При botrest

166
OpenServer: Symfony возвращает text/plain вместо text/javascript

OpenServer: Symfony возвращает text/plain вместо text/javascript

В проекте на Symfony в папке public/ положил файлы js и css, но в браузере ( тестировал в mozilla) при подключении файла выходит ошибка Сценарий из «http://1270

71
Как сделать эффект быстрой смены картинок за определенное время

Как сделать эффект быстрой смены картинок за определенное время

Есть несколько блоковКак при наведении сделать быстрое изменение картинок как в начальных титрах фильмах Marvel?

157