如何為表制作一個jQuery過濾器

Question

我有一個非常大的表，想要為其創建一個帶有jquery的過濾器。 基本上，我想做這樣的事情。 觀看圖像。

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

我的代碼看起來像這樣。 但是，為每個表編寫每個類都需要花費大量時間。 也許我可以更快地做到這一點？ 另外，由於某種原因，此Jquery無法正常工作。 有任何想法嗎？

<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

這是我可以執行的快速方法：

使用適當的類和ID設置表，以便於選擇：

<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>

單擊過濾器按鈕時添加過濾器功能：

$("#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();
    });
});

JSF以上代碼中間

Answer 2

我認為您應該找到一些圖書館，因為它不像您想的那么容易。 這是大型的tablesorter庫，也許會對您有所幫助http://tablesorter.com/docs/