How to make a Jquery filter for table

Question

I have a really big table and want to create a filter with jquery for it. Basically, I want to make something like this. Watch the image.

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

My code looks something like this. However, It takes a lot of time to write every class for every table. Maybe I could do It quicker way? Also, this Jquery doesn't work for some reason. Any Ideas?

<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

Here is a quick way I would do it:

Setup the tables with appropriate classes and IDs to be selected easily:

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

Add a filter function when filter button is clicked:

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

I think you should find some library,because its not that easy as you think. Here is big tablesorter library,maybe it will help you http://tablesorter.com/docs/