Wie wird in der Tabelle nach bestimmten Spaltenwerten gesucht?

Question

Ich muss ein Suchfeld in HTML-Tabelle mit Dropdown-Menü implementieren, so dass ich die Daten nach bestimmten Spaltennamen Überschrift suchen können.

<table> 
    <thead> 
    <tr> 
     <th>Fruit</th> 
     <th>Color</th> 
    </tr> 
    </thead> 
    <tr> 
     <td>Apple</td> 
     <td>Green</td> 
    </tr> 
    <tr> 
     <td>Grapes</td> 
     <td>Green</td> 
    </tr> 
    <tr> 
     <td>Orange</td> 
     <td>Orange</td> 
    </tr> 
</table> 

Ich habe eine Fiddle aber in Eclipse funktioniert nicht.

Answer 1

Sie können ein einfaches Skript schreiben, das eine CSS-Klasse für die richtigen Spalten- und Spaltenwerte hinzufügt. Zum Beispiel:

$("tr:first-child").addClass('fruits'); 

dann können Sie einfach benutzerdefinierte Filter schreiben (Suche nach (können Sie benutzerdefinierte Klasse wie‘.fruits' für n-ten Spalte, nicht nur im ersten Kind, es ist nur ein Beispiel hinzufügen) Obst mit 'Z' Buchstaben im Namen) wie:

var resultsOfSearchingFruitsWithZLetter = []; 
$.each($('.fruits'), function(val) { 
    if(val.val().indexOf('z') > -1) { 
     resultsOfSearchingFruitsWithALetter.push(val.val()); 
    } 
});