javascript - 在jQuery上按类或数据过滤表

当我选择第一个“图标”时显示“未找到”时出现错误，然后选择“护符”并且不显示。应显示“未找到”。
有可能这样做吗？


添加到类= f图标f环f领。然后按类查找值。

选择“图标环颈或环图标颈部或颈环图标”并显示此行。使其仅在找到匹配项时显示。

$(document).ready(function() {
(function() {
  var filters = {
    itemslot1: null,
    itemslot2: null,
    itemslot3: null
  };

  function updateFilters() {
    $(".table-data")
      .hide()
      .filter(function() {
        var self = $(this),
          result = true;

        Object.keys(filters).forEach(function(filter) {
          if (
            filters[filter] &&
            filters[filter] != "All"
          ) {
            result = result && filters[filter] === self.data(filter);
          }
        });

        return result;

      })

      .show();
  }

  function bindDropdownFilters() {
    Object.keys(filters).forEach(function(filterName) {
      $("#" + filterName + "-filter").on("change", function() {
        filters[filterName] = this.value;

        updateFilters();

        var $table = $('#filter-table'),
            $colLength = $table.find('thead th').length,
            $filteredCount = $table.find('tbody tr:visible').length;

        console.log($filteredCount);
        if ($filteredCount == 0) {
          $table.find('tbody').append($("<tr />").addClass("no-result").css({
            "text-align": "center"
          }).append($("<td />").attr("colspan", $colLength).html("Not found.")));
        } else {
           $(".no-result").remove();
          }
      });
    });
  }

  bindDropdownFilters();
})();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table-filters'>
        <select id="itemslot1-filter">
          <option>All</option>
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        <select id="itemslot2-filter">
          <option>All</option>
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        <select id="itemslot3-filter">
          <option>All</option>
          <option value="Icon">Icon</option>
          <option value="Ring">Ring</option>
          <option value="Waist">Waist</option>
          <option value="Talisman">Talisman</option>
          <option value="Sword Knot">Sword Knot</option>
          <option value="Neck">Neck</option>
        </select>
        </div>

        <table id="filter-table">
         <thead>
          <tr>
           <th>Slot 1</th>
           <th>Slot 2</th>
           <th>Slot 3</th>
          </tr>
          </thead>
          <tbody>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist">
            <td>Ring</td>
            <td>Neck</td>
            <td>Waist</td>
           </tr>
           <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring">
            <td>Neck</td>
            <td>Waist</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring">
            <td>Sword Knot</td>
            <td>Neck</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring">
            <td>Ring</td>
            <td>Ring</td>
            <td>Ring</td>
           </tr>
           <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman">
            <td>Ring</td>
            <td>Ring</td>
            <td>Talisman</td>
           </tr>
          </tbody>
        </table>

最佳答案

为isZero提供了布尔检查，以跟踪应显示还是隐藏“未找到”。

还添加了一个检查以验证您的table-data是否可见，然后将删除“未找到”。

当您选择“图标”时，将比“护身符”保留“未找到”选项。

$(document).ready(function() {
  (function() {
    var filters = {
      itemslot1: null,
      itemslot2: null,
      itemslot3: null
    };

    function updateFilters() {
      $(".table-data")
        .hide()
        .filter(function() {
          var self = $(this),
            result = true;

          Object.keys(filters).forEach(function(filter) {
            if (
              filters[filter] &&
              filters[filter] != "All"
            ) {
              result = result && filters[filter] === self.data(filter);
            }
          });

          return result;

        })

        .show();
    }

    function bindDropdownFilters() {
      var isZero = false;
      Object.keys(filters).forEach(function(filterName) {
        $("#" + filterName + "-filter").on("change", function() {
          filters[filterName] = this.value;

          updateFilters();

          var $table = $('#filter-table'),
            $colLength = $table.find('thead th').length,
            $filteredCount = $table.find('tbody tr:visible').length;

          console.log($filteredCount);
          if ($filteredCount == 0 && !isZero) {
            isZero = true;
            $table.find('tbody').append($("<tr />").addClass("no-result").css({
              "text-align": "center"
            }).append($("<td />").attr("colspan", $colLength).html("Not found.")));
          } else if ($('.table-data').css('display') != 'none') {
            $(".no-result").remove();
            isZero = false;
          }
        });
      });
    }

    bindDropdownFilters();
  })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table-filters'>
  <select id="itemslot1-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
  <select id="itemslot2-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
  <select id="itemslot3-filter">
    <option>All</option>
    <option value="Icon">Icon</option>
    <option value="Ring">Ring</option>
    <option value="Waist">Waist</option>
    <option value="Talisman">Talisman</option>
    <option value="Sword Knot">Sword Knot</option>
    <option value="Neck">Neck</option>
  </select>
</div>

<table id="filter-table">
  <thead>
    <tr>
      <th>Slot 1</th>
      <th>Slot 2</th>
      <th>Slot 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist">
      <td>Ring</td>
      <td>Neck</td>
      <td>Waist</td>
    </tr>
    <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring">
      <td>Neck</td>
      <td>Waist</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring">
      <td>Sword Knot</td>
      <td>Neck</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring">
      <td>Ring</td>
      <td>Ring</td>
      <td>Ring</td>
    </tr>
    <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman">
      <td>Ring</td>
      <td>Ring</td>
      <td>Talisman</td>
    </tr>
  </tbody>
</table>