Отфильтровать таблицу 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

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

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

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

Answer 2

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

1. Google Visualization Tables
2. JQuery datepickers
3. JQuery autocomplete

В принципе, вы хотите, чтобы сфальсифицировать JQuery автозаполнения выберем (autocompleteselect) событие в яваскрипта объект, содержащий все элементы (далеко далеко лучше, чем пытаться удержать их в объектах DOM). Установите его так, чтобы при срабатывании события автозаполнения, он запускает функцию, которая проходит через соответствующие объекты в ваших данных, загружает их в таблицу 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 
    ]; 
}