表使用Javascript过滤多个复选框

Question

我有表格，当您从复选框中选择某些值时，会显示某些行，并隐藏其他行。我的问题是我只能从一行指令中选择。在这种情况下，只有国家我可以选择我的表格在我想要的地方，而City也是一个指令。例如，如果我选择中国和维尔纽斯，它应该只显示ASP.Net而不是ASP.Net和Javascript。希望每个人都能理解。

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

Answer 1

您的问题在

中

// Loop through all table rows

您不仅需要获取国家/地区，还需要获取所选城市，并根据这些值过滤行。如果与该行相关的城市和国家/地区对应于所选行，则可以取消选择该行并隐藏所有剩余行。

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