Wie mache ich einen Jquery-Filter für die Tabelle

Question

Ich habe eine wirklich große Tabelle und möchte einen Filter mit jquery für sie erstellen. Grundsätzlich möchte ich so etwas machen. Sieh dir das Bild an.

$(document).ready(function(){ 
    $("#button").click(function(){ 
     if ($("#checkbox1").is(':checked')) 
      $(".anglu").show(); 
     else 
      $(".anglu").hide(); 
    }); 
}); 

sieht mein Code so etwas wie dieses. Es kostet jedoch viel Zeit, jede Klasse für jede Tabelle zu schreiben. Vielleicht könnte ich es schneller machen? Außerdem funktioniert diese Jquery aus irgendeinem Grund nicht. Irgendwelche Ideen?

<table style="width:100%"> 
    <thead> 
     <tr> 
      <th>Gidas</th> 
      <th>Kategorija</th> 
      <th>Kalbos</th> 
      <th>Veda po salis</th> 
      <th>Kontaktai</th> 
      <th>E-pastas</th> 
     </tr> 
    </thead> 
    <tr class="anglu"> 
     <td>Akucevičiūtė, Jūratė</td> 
     <td>Aukščiausia - Ekspertas</td> 
     <td>Anglu</td> 
     <td>Italija</td> 
     <td>+370564845698</td> 
     <td>rutasiogoliavaitegmail.com</td> 
    </tr> 
    <tr> 
     <td>Abaravičiūtė, Rūta</td> 
     <td>Antra</td> 
     <td>Rusų</td> 
     <td>Estija, Islandija, Latvija, Lietuva</td> 
     <td>+37056965698</td> 
     <td>geramoerishotmail.lt</td> 
    </tr> 
    <tr> 
     <td>Arlauskienė, Vitalija</td> 
     <td>Pirma</td> 
     <td>Lenku</td> 
     <td>Estija, Latvija, Lenkija, Lietuva, Liuksemburgas, Nyderlandai, Suomija, Švedija</td> 
     <td>+37056568698</td> 
     <td>gomuriotiesapastininkas.lt</td> 
    </tr> 
</table> 

Answer 1

Hier ist ein schneller Weg, ich würde es tun:

-Setup die Tabellen mit den entsprechenden Klassen und IDs leicht ausgewählt werden:

<div id="country-filters"> 
<input type="checkbox" id="filter-united_states" value="United States" /> <label for="filter-united_states">Unied States</label> 
<input type="checkbox" id="filter-africa" value="Africa" /> <label for="filter-africa">Africa</label> 
<input type="checkbox" id="filter-china" value="China" /> <label for="filter-china">China</label> 
</div> 
<button id="filter-button">Filter</button> 

<table id="values-table" style="margin-top:20px;"> 
<thead> 
    <tr> 
    <td>Guide</td> 
    <td>Category</td> 
    <td>Languages</td> 
    <td>Countries</td> 
    <td>Phone Number</td> 
    <td>Email</td> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td class="guide">JavaScript</td> 
    <td class="category">Client Script</td> 
    <td class="languages"><span class="language">English</span>, <span class="language">Spanish</span></td> 
    <td class="countries"><span class="country">United States</span>, <span class="country">China</span></td> 
    <td class="phone">555-555-5555</td> 
    <td class="email"></td> 
    </tr> 
    <tr> 
    <td class="guide">PHP</td> 
    <td class="category">Server Script</td> 
    <td class="languages"><span class="language">English</span></td> 
    <td class="countries"><span class="country">Africa</span></td> 
    <td class="phone">555-555-5555</td> 
    <td class="email"></td> 
    </tr> 
    <tr> 
    <td class="guide">ASP.net</td> 
    <td class="category">Server Script</td> 
    <td class="languages"><span class="language">Mandarin</span></td> 
    <td class="countries"><span class="country">China</span></td> 
    <td class="phone">555-555-5555</td> 
    <td class="email"></td> 
    </tr> 
</tbody> 
</table> 

eine Filterfunktion hinzufügen, wenn der Filter-Schaltfläche geklickt wird:

$("#filter-button").on("click", function(e){ 
    // Show all rows (in case any were hidden by a previous filtering) 
    jQuery("#values-table > tr:hidden, #values-table > tbody > tr:hidden").show(); 
    // Get all filtered countries as array 
    var selCountries = $("#country-filters input[type='checkbox']:checked").map(function(){return $(this).val();}).get(); 
    if(selCountries.length < 1) { 
     return; // No countries are selected! 
    } 
    // Loop through all table rows 
    $("#values-table > tr, #values-table > tbody > tr").each(function(){ 
     // Loop through and return only rows that DO NOT contain a selected country and hide them 
     $(this).filter(function(idx){ 
      return $(this).find("> td.countries > span.country") 
       .filter(function(){return selCountries.indexOf($(this).text()) >= 0;}).length < 1; 
     }).hide(); 
    }); 
}); 

JSFiddle of above code

Answer 2

Ich denke, Sie sollten eine Bibliothek finden, weil es nicht so einfach ist, wie Sie denken. Hier ist groß tablesorter Bibliothek, vielleicht wird es Ihnen helfen http://tablesorter.com/docs/