第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Jquery 多個表篩選器

Jquery 多個表篩選器

寶慕林4294392 2022-08-18 16:04:57
我正在嘗試使用帶有復(fù)選框的Jquery將多個過濾器應(yīng)用于表格。我想對“位置和年齡”列進行篩選。位置篩選器工作正常。例如,選中“東”復(fù)選框?qū)H顯示城市映射到“東”的行。我還需要過濾年齡列,并有一個復(fù)選框,如果選中,應(yīng)該隱藏“未知”年齡。除了位置過濾器之外,還應(yīng)應(yīng)用此過濾器。例如,選中“隱藏未知年齡”和“東方”應(yīng)僅顯示東部地區(qū)有年齡的人。我將復(fù)選框的狀態(tài)存儲為布爾值,但我在代碼中實現(xiàn)此內(nèi)容時遇到問題。我正在考慮檢查布爾值并在之前對代碼進行分支(如果(cities == “”),但我認(rèn)為這會導(dǎo)致大量重復(fù)的代碼。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(); }            })        }    })})
查看完整描述

1 回答

?
慕村225694

TA貢獻1880條經(jīng)驗 獲得超4個贊

你可以這樣做:


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


查看完整回答
反對 回復(fù) 2022-08-18
  • 1 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號