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

JSFiddle of above code

Answer 2

我认为你应该找一些图书馆，因为它并不像你想象的那么容易。这是一个大型的tableorter库，也许它会帮助你 http://tablesorter.com/docs/

如何为表创建一个Jquery过滤器

2 个答案: