Фильтруйте таблицу HTML, и результат должен быть в таблице HTML

Question

Я новичок в программировании, у меня HTML-страница с 5 столбцами и 20 строками и полем ввода над таблицей. Когда я ищу дату из таблицы, результат должен быть в формате таблицы. Смотрите пример ниже.

chandru, chandu | george, john  | ohn, chandu | james, jones | Gita, sham       |
________________________________________________________________________________
Ramu, gopi      | rekha, swathi | Arun, venu  | Venu, chandu | prem, ravi, ramu |
________________________________________________________________________________
...             | ...           | ...         | ...          |....              |
________________________________________________________________________________

Когда я ищу слово "chandu", результат должен быть в формате таблицы ниже:

chandru, chandu | ohn, chandu  | Venu, chandu |

Результат должен формироваться в таблице из 5 столбцов, если результат поиска больше 5, он должен выровняться во 2-й строке ...

Пожалуйста, ознакомьтесь с моим английским и предоставьте полный код ...

Answer 1

В то время как вы в основном просите кого-то написать для вас полное приложение, я собираюсь предложить несколько компонентов, которые упростят эту задачу.

1. Визуализация Google Таблицы
2. JQuery DatePickers
3. jQuery автозаполнение

По сути, вы хотите привязать событие select (autocompleteselect) jQuery autocomplete к объекту javascript, содержащему все записи (гораздо лучше, чем пытаться хранить их в объектах DOM). Настройте его так, чтобы при возникновении события autocompleteselect оно вызывало функцию, которая перебирает соответствующие объекты в ваших данных, загружает их в таблицу Google с помощью функции addRows и затем перерисовывает таблицу.

Таблица Google полностью сортируется, ее легко фильтровать и перерисовывать. Связав события из вашего средства выбора даты и ввода с объектом данных, вы можете легко манипулировать данными, которые будут отображаться в таблице.

Что касается всей идеи из пяти столбцов, когда вы собираетесь добавлять строки, просто вставляйте их последовательно в функцию addRows во время цикла создания таблицы:

rowArray=[];
for (d in dataObj) {
rowArray+=[
    dataObj[d].name,
    dataObj[d+1].name,
    dataObj[d+2].name,
    dataObj[d+3].name,
    dataObj[d+4].name
    ];
}

Answer 2

Привет, Galwegian & Jim, спасибо за отзыв. Я попробовал код из приведенной ниже ссылки

http://www.mikemerritt.me/demos/lf-1-2/table.html

Используя вышеуказанную ссылку, я смог отфильтровать всю строку, янужно отфильтровать как я уже говорил выше ...