Filter the HTML table and result should be in a HTML table

Question

I am new to programming, i am having a html page with 5 columns and 20 rows and an input field above the table. When i search for a date from the table, the result should be in a table format. See the example below.

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

When ever i search for the word "chandu", the result should be in below table format:

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

The result should form in a table of 5 columns, if the search result is more than 5, it should align in 2nd row...

Please bare with my english and please provide with complete code...

Answer 1

Hi Galwegian & Jim, thanks your feedback.. I have tried the code from below link

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

By using above link, i have able to filter entire row, i need to filter as i mentioned above....

Answer 2

While you're basically asking someone to code a complete application for you, I'm going to offer up a few components that will make this easier.

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

Basically, you want to rig the jQuery autocomplete's select (autocompleteselect) event to a javascript object containing all the entries (far far better than trying to hold them in DOM objects). Set it up so that when the autocompleteselect event fires, it triggers a function that loops through the matching objects in your data, loads them into the Google Table using the "addRows" function, and then redraws the table.

The Google Table is fully sortable and easy to filter and redraw. By linking the events from your datepicker and input to the data object, you can easily manipulate the data that will be rendered in the table.

As for the whole five-column idea, when you go to add rows, just put them in serially in the addRows function during your table creation loop:

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
    ];
}