Как переделать функцию?

Question

[Statium]

function tableSearch() {
var phrase = document.getElementById('search');
var table = document.getElementById('table');
var regPhrase = new RegExp(phrase.value, 'i');
var flag = false;
var tr = 0;
for(var i = 1; i < table.rows.length; i++) {
flag = false;
for(var j = table.rows[i].cells.length - 1; j >= 0; j--) {
flag = regPhrase.test(table.rows[i].cells[j].textContent);
if(flag) break;
}
if(flag) {
table.rows[i].style.display = "";
tr++;
} else {
table.rows[i].style.display = "none";
}
}
if(tr == 0) {
var theElement = document.getElementById("none");
theElement.innerHTML = "По вашему запросу не найдено ни одного магазина.";
} else {
var theElement = document.getElementById("none");
theElement.innerHTML = "";
}
}

Функция осуществляет живой поиск по таблице.
В таблице много столбцов, осуществляется поиск по всем, мне необходимо исключить некоторые столбцы.
Помогите переписать функцию.

Comments

[Александр Черемхин]

Плохая идея искать что то в html разметке. Намного лучше
- создать модель. Массив с объектами содержащие данные
- построить в js таблицу html на основе данных из модели

при поиске
- в модели отфильтровать все элементы массива удовлетворяющие условию
- перестроить таблицу на основе отфильтрованного массива.

Answer 1

[Александр Черемхин]

Плохая идея искать что то в html разметке. Намного лучше
- создать модель. Массив с объектами содержащие данные
- построить в js таблицу html на основе данных из модели

при поиске
- в модели отфильтровать все элементы массива удовлетворяющие условию
- перестроить таблицу на основе отфильтрованного массива.

Ниже псевдо код.

const models = [  // модель для таблицы
    {id: 0, name: '0000'},
    {id: 1, name: '1111'},
    {id: 2, name: '2222'}
];

const table = document.getElementById('table');
const phrase = document.getElementById('search');
const theElement = document.getElementById("none");

function render(table, items) {  // отрисовка строк в табл.
    table.innerHTML = items.reduce((rows, item) => {
        rows += `<tr><td>${item.id}</td><td>${item.name}</td></tr>`;
        return rows;
    }, '');
}

function search(value) { // поиск в модели
    const req = new RegExp(value, 'i');

    // здесь укажите поля по которым искать
    const items = models.filter(item => req.test(item.name)); // фильтр по модели, 

    render(table, items);  // рисуем табл для отфильтрованных элементов модели
    theElement.innerHTML = items.length === 0 ? "По вашему запросу не найдено ни одного магазина." : "";  // сообщение
}

phrase.addEventListener('change', e => search(e.target.value)); // при изменении строки поиска

render(table, models); // начальная отрисовка табл.