时间戳

首页 > 解决方案 > Jquery 多表过滤器

javascript - Jquery 多表过滤器

问题描述

我正在尝试使用带有复选框的 Jquery 将多个过滤器应用于表。我想过滤位置和年龄列。位置过滤器工作正常。例如，选中“East”复选框将仅显示城市映射到“East”的行。

我还需要过滤年龄列，并有一个复选框，如果选中，应该隐藏“未知”年龄。除了位置过滤器之外，还应应用此过滤器。前任。选中“隐藏未知年龄”和“东部”应该只显示东部地区有年龄的人。我将复选框的状态存储为布尔值，但我无法在代码中实现它。我正在考虑检查布尔值并在之前分支代码（如果（城市==“”），但认为这会导致大量重复代码。JS小提琴：https ://jsfiddle.net/qjfxgkon/

$(document).ready(function () {

    // Map regions to cities
    const regions = {
        'central': ['Chicago', 'Madison', 'Dallas'],
        'east': ['New York', 'Boston'],
        'west': ['Seattle', 'Los Angeles'],
    }

    $("input[type='checkbox']").change(function () {
        var locations = [];
        var hideNoAges = $('#hideAge').is(":checked")

        // Get ids of each region checkbox checked
        $(".location:input[type='checkbox']").each(function () {
            if ($(this).is(":checked")) {
                locations.push($(this).attr('id'));
            }
        })

        // Get list of all cities to be included in filter
        var cities = locations.map(function (i) { return regions[i].join(); }).join().split(",");

        // Branch code here? if (!hideNoAges)..... else.......
        if (cities == "") {// if no filters selected, show all items
            $("#indexTable tbody tr").show();
        } else { // otherwise, hide everything...
            $("#indexTable tbody tr").hide();

            $("#indexTable tbody tr").each(function () {
                var show = false;
                var row = $(this);
                //show only rows that match city name
                cities.forEach(function (city) {
                    if (row.find('td').eq(1).text() == city) { show = true; }
                })
                if (show) { row.show(); }
            })
        }
    })
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <table id="indexTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>Chicago</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Mike</td>
                <td>New York</td>
                <td>Unknown</td>
            </tr>
            <tr>
                <td>Sarah</td>
                <td>Seattle</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Bill</td>
                <td>Los Angeles</td>
                <td>51</td>
            </tr>
            <tr>
                <td>Gary</td>
                <td>Boston</td>
                <td>37</td>
            </tr>
            <tr>
                <td>Melissa</td>
                <td>Madison</td>
                <td>Unknown</td>
            </tr>
            <tr>
                <td>Greg</td>
                <td>Dallas</td>
                <td>61</td>
            </tr>
        </tbody>
    </table>
    <h5>Age Filter</h5>
    <label for="hideAge">Hide unknown ages</label>
    <input type="checkbox" id="hideAge">
    <h5>Region Filter</h5>
    <div>
        <label for="east">East</label>
        <input type="checkbox" id="east" class="location">
    </div>
    <div>
        <label for="central">Central</label>
        <input type="checkbox" id="central" class="location">
    </div>
    <div>
        <label for="west">West</label>
        <input type="checkbox" id="west" class="location">
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>

</html>

任何帮助表示赞赏。谢谢

标签： javascriptjquery

解决方案

你可以这样做：

$(document).ready(function() {

  // Map regions to cities
  const regions = {
    'central': ['Chicago', 'Madison', 'Dallas'],
    'east': ['New York', 'Boston'],
    'west': ['Seattle', 'Los Angeles'],
  }

  $("input[type='checkbox']").change(function() {
    var locations = [];
    var hideNoAges = $('#hideAge').is(":checked")

    // Get ids of each region checkbox checked
    $(".location:input[type='checkbox']").each(function() {
      if ($(this).is(":checked")) {
        locations.push($(this).attr('id'));
      }
    })

    // Get list of all cities to be included in filter
    var cities = locations.map(function(i) {
      return regions[i].join();
    }).join().split(",");

    if (cities == "" && !hideNoAges) { // if no filters selected, show all items
      $("#indexTable tbody tr").show();
    } else { // otherwise, hide everything...
      $("#indexTable tbody tr").hide();

      $("#indexTable tbody tr").each(function() {
        var show = false;
        var row = $(this);

        if (hideNoAges) {
          if (row.find('td').eq(2).text() == "Unknown") {
            show = false;
          } else {
            show = true;
            if (cities != "") {
              cities.forEach(function(city) {
                if (row.find('td').eq(1).text() != city) {
                  show = false;
                }
              });
            }
          }
        }

        cities.forEach(function(city) {
          if (row.find('td').eq(1).text() == city) {
            show = true;
            if (hideNoAges && row.find('td').eq(2).text() == "Unknown") {
              show = false;
            }
          }
        })
        if (show) {
          row.show();
        }
      })
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="indexTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Location</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bob</td>
          <td>Chicago</td>
          <td>24</td>
        </tr>
        <tr>
          <td>Mike</td>
          <td>New York</td>
          <td>Unknown</td>
        </tr>
        <tr>
          <td>Sarah</td>
          <td>Seattle</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Bill</td>
          <td>Los Angeles</td>
          <td>51</td>
        </tr>
        <tr>
          <td>Gary</td>
          <td>Boston</td>
          <td>37</td>
        </tr>
        <tr>
          <td>Melissa</td>
          <td>Madison</td>
          <td>Unknown</td>
        </tr>
        <tr>
          <td>Greg</td>
          <td>Dallas</td>
          <td>61</td>
        </tr>
      </tbody>
    </table>
    <h5>Age Filter</h5>
    <label for="hideAge">Hide unknown ages</label>
    <input type="checkbox" id="hideAge">
    <h5>Region Filter</h5>
    <div>
      <label for="east">East</label>
      <input type="checkbox" id="east" class="location">
    </div>
    <div>
      <label for="central">Central</label>
      <input type="checkbox" id="central" class="location">
    </div>
    <div>
      <label for="west">West</label>
      <input type="checkbox" id="west" class="location">
    </div>

推荐阅读