Filtrer le tableau HTML et le résultat devrait être dans un tableau HTML

Question

Je suis nouveau à la programmation, j'ai une page html avec 5 colonnes et 20 lignes et un champ de saisie au-dessus de la table. Lorsque je recherche une date dans la table, le résultat doit être dans un format de tableau. Voir l'exemple ci-dessous.

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

Chaque fois que je recherche le mot « Chandu », le résultat devrait être au-dessous sous forme de tableau:

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

Le résultat devrait se former dans une table de 5 colonnes, si le résultat de recherche est plus de 5, il devrait aligner au 2ème rang ...

S'il vous plaît nu avec mon anglais et s'il vous plaît fournir le code complet ...

Answer 1

Salut Galwegian & Jim, merci yo ur commentaires .. J'ai essayé le code de lien ci-dessous

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

En utilisant le lien ci-dessus, j'ai pu filtrer toute la ligne, je dois filtrer comme je l'ai mentionné ci-dessus ....

Answer 2

Alors que vous demandez essentiellement à quelqu'un de coder une application complète pour vous, je vais vous proposer quelques composants qui faciliteront cela.

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

Fondamentalement, vous voulez truquer le jQuery saisie semi-automatique Sélectionnons événement (autocompleteselect) à un objet javascript contenant toutes les entrées (jusqu'à présent mieux que d'essayer de les tenir dans des objets DOM). Configurez-le de sorte que lorsque l'événement autocompleteselect se déclenche, il déclenche une fonction qui parcourt les objets correspondants dans vos données, les charge dans la table Google à l'aide de la fonction "addRows", puis redessine la table.

La table Google est entièrement triable et facile à filtrer et à redessiner. En liant les événements de votre outil de date et de l'entrée à l'objet de données, vous pouvez facilement manipuler les données qui seront affichées dans la table.

Comme pour toute idée cinq colonnes, quand vous allez ajouter des lignes, il suffit de les mettre en série dans la fonction addRows pendant votre table boucle de création:

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