Table filter multiple checkboxes with Javascript

Question

I have table that when you select certain values from checkboxes some rows gets displayed and other rows are hidden. My problem is that I can only select from one row of instructions. In this case from only countries I can select what my table will look like where as I want that also City would also be an instruction. For example, if I were to select China and Vilnius it should show only ASP.Net instead of ASP.Net and Javascript. Hope everyone can understand.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="city-filters">
  <input type="checkbox" id="filter-vilnius" value="Vilnius" />
  <label for="filter-vilnius">Vilnius</label>
  <input type="checkbox" id="filter-kaunas" value="Kaunas" />
  <label for="filter-kaunas">Kaunas</label>
</div>
<button id="filter-button">Filter</button>

<table id="values-table" style="margin-top:20px;">
  <thead>
    <tr>
      <td>Guide</td>
      <td>City</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="city">Vilnius</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="city">Kaunas</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="city">Vilnius</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>

gaetanoM · Accepted Answer · 2017-04-28 14:25:04Z

Your issue is inside the

// Loop through all table rows

You need to get not only the countries but also the cities selected and filter the rows against those values. If the cities and countries related to the row correspond to the selected ones you can deselect that row and hide all the remaining.

$("#filter-button").on("click", function (e) {
    // Show all rows (in case any were hidden by a previous filtering)
    $("#values-table > tr:hidden, #values-table > tbody > tr:hidden").show();
    // Get all filtered countries as array
    var selCountries = $("#country-filters :checkbox:checked").map(function () {
        return $(this).val();
    }).get();
    if (selCountries.length < 1) {
        return; // No countries are selected!
    }
    var selCties = $("#city-filters :checkbox:checked").map(function () {
        return $(this).val();
    }).get();
    // Loop through all table rows
    var x = $("#values-table > tr, #values-table > tbody > tr").filter(function (idx, ele) {
        var countries = $(ele).find('td.countries span.country');
        var nFoundCountries = selCountries.filter(function (ele, idx) {
            return countries.text().indexOf(ele) != -1;
        }).length;
        if (selCties.length == 0) {
            return (nFoundCountries == 0);
        } else {
            var cities = $(ele).find('td.city');
            var nFoundCities = selCties.filter(function (ele, idx) {
                return cities.text().indexOf(ele) != -1;
            }).length;

            return !(nFoundCities == selCties.length &&
            (nFoundCountries == countries.length && nFoundCountries == selCountries.length));
        }
    }).hide();
});

//
// Original Filter: the old one
//
$("#Orig-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();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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>
<div id="city-filters">
    <input type="checkbox" id="filter-vilnius" value="Vilnius"/>
    <label for="filter-vilnius">Vilnius</label>
    <input type="checkbox" id="filter-kaunas" value="Kaunas"/>
    <label for="filter-kaunas">Kaunas</label>
</div>
<button id="filter-button">Filter</button>
<button id="Orig-filter-button">Original Filter</button>

<table id="values-table" style="margin-top:20px;">
    <thead>
    <tr>
        <td>Guide</td>
        <td>City</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="city">Vilnius</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="city">Kaunas</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="city">Vilnius</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>

However, if I only select China, now it does not show both Chinas, only one, that has ASP.net which is not great that is. @gaetanoM
@AdomasArabella I'm sorry for the problem. Snippet updated. Now, you can compare the original filter and my modified version. Could you test and let me know if does it work?
Yup, works well. I have to make some tweaks but thank you for the main body. I really wanted that.

Collectives™ on Stack Overflow

Table filter multiple checkboxes with Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related