时间戳

首页 > 解决方案 > 使用多个下拉列表过滤 HTML 表格

jquery - 使用多个下拉列表过滤 HTML 表格

问题描述

我有两个用于过滤我的 HTML 表格的下拉列表，它们工作正常，但是过滤器不能一起工作。例如，如果我选择存档，数据会被正确过滤，但是当我选择另一个过滤器时，它会取消过滤，然后只过滤另一个过滤器。我怎样才能使两者一起工作或更清洁的方式来实现呢？

$(function() {
  $('#archive').change(function() {
    if (this.value == "archived") {
      $("#filter")
        .find("tbody tr")
        .hide()
        .filter(function() {
          return $(this).children('td').eq(3).text().trim() !== '';
        }).show();
    } else if (this.value == "not-archived") {

      $("#filter").find("tbody tr").hide().filter(function() {
        return $(this).children('td').eq(3).text().trim() === '';
      }).show();
    } else {
      $("#filter").find("tbody tr").show();
    }
  });

  $('#type').change(function() {
    if (this.value == "bookers") {
      $("#filter")
        .find("tbody tr")
        .hide()
        .filter(function() {
          return $(this).children('td').eq(4).text().trim() === 'True';
        }).show();
    } else if (this.value == "basics") {

      $("#filter").find("tbody tr").hide().filter(function() {
        return $(this).children('td').eq(4).text().trim() === 'False';
      }).show();
    } else {
      $("#filter").find("tbody tr").show();
    }
  });

  // show bookers by default
  $("#filter")
    .find("tbody tr")
    .hide()
    .filter(function() {
      return $(this).children('td').eq(4).text().trim() === 'True';
    }).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="type">Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="bookers" selected>Bookers</option>
  <option value="basics">Basics</option>
</select>

<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>03/04/12</td>
      <td>True</td>
    </th>
    <th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>True</td>
    </th>
    <th>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>10/10/12</td>
      <td>False</td>
    </th>
  </tbody>
</table>

标签： jqueryfunctionhtml-tabledropdownonchange

解决方案

好的，我对此进行了盲编码，但是您可以像下面这样处理它吗？

一种一次性过滤项目的方法。

<label for="type">Full Entry</label>
<select id="type" name="type" class="filter-field">
    <option value="all">All</option>
    <option value="bookers" selected>Bookers</option>
    <option value="basics">Basics</option>
</select>

<label for="archive">Filter Archive</label>
<select id="archive" name="archive" class="filter-field">
    <option value="all">All</option>
    <option value="archived">Archived</option>
    <option value="not-archived">Not Archived</option>
</select>

$(function () {
    $('.filter-field').change(function () {
        //get the values
        var _archived = $("#archived").val();
        var _type = $("#type").val();

        if(typeof _type == "undefined") _type = "bookers"; //show bookers by default

        $("#filter")
            .find("tbody tr")
            .hide()
            .filter(function () {
                var result = $(this).children('td');
                if(_archived == 'archived') {
                   result = result.eq(3).text().trim() !== '';
                } else if (_archived=='not-archived') {
                   result = result.eq(3).text().trim() === '';
                }
                if(_type=='bookers') {
                   result = result.eq(4).text().trim() === 'True';
                } else if(_type=='basics' {
                   result = result.eq(4).text().trim() === 'False';
                }

                return result;
            }).show();
    });

});

推荐阅读