使用jQuery過濾HTML表

Question

我有一個這樣的HTML表：

<table id="tableRegister" border="1">
    <tr>
        <th>Fullname</th>
        <th>Age</th>
        <th>Sport</th>
        <th>Class </th>
        <th>Term</th>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
        <td>Thulasiram.S</td>
        <td>11</td>
        <td>Chess</td>
        <td>1</td>
        <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
        <td>ST Ram</td>
        <td>11</td>
        <td>Cricket</td>
        <td>1</td>
        <td>Month</td>
    </tr>
    <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
        <td>Ram Kumar.S</td>
        <td>21</td>
        <td>Chess</td>
        <td>2</td>
        <td>Day</td>
    </tr>
    <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
        <td>Dinesh Kumar.S</td>
        <td>30</td>
        <td>Chess</td>
        <td>3</td>
        <td>Week</td>
    </tr>
</table>

我想根據年齡和期限三列進行過濾。 因此，列的不同值在三個選擇框中：

    <select class="age" data-attribute="age" >
        <option value="all">Select age</option>
            <option value="11">11</option>
            <option value="21">21</option>
            <option value="30">30</option>
            <option value="32">32</option>
    </select>
    <select class="class" data-attribute="class">
            <option value="all">Select Class </option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
    </select>

當全部選中默認選項時，我要全部顯示。 為了簡化表渲染過程，我在每行中放置了三個屬性，這些屬性包含可針對當前行過濾的這三個字段中每個字段的值： data-age="" ， data-class=""和data-term="" 。

因此，我希望能夠基於這些內容進行歸檔，但是對於是否重新選擇選項，我遇到了問題，因為它會隱藏所有行。 有人可以幫我，因為我堅持下去嗎？ 這是[JS FIDDLE] [1]

    $(".age").on("change",function(){
        ageVal = $(this).val();
        updateTable(ageVal,'age');
    });

    $(".class").on("change",function(){
        classVal = $(this).val();
        updateTable(classVal,'class');
    });

    $(".term").on("change",function(){
        termVal = $(this).val();
        updateTable(termVal, 'term');
    });

    var tableRows = $('#tableRegister').find('.filter-row');

    function updateTable(selectVal, attribute){

        if(selectVal === 'all'){
            // show all
            $('.filter-row').show();
        }else{
            tableRows.each(function(){
                var rowAttValue = $(this).attr("data-"+attribute);
                if(selectVal === rowAttValue){
                    $(this).addClass('show');
                    $(this).show();
                }else{
                    $(this).addClass('hide');
                    $(this).hide();
                }
            });
        }
    }

Answer 1

問題是您要依靠相等性來顯示行，而沒有考慮其他過濾器。

我重寫了您的代碼以處理所有過濾器，並在其中一個過濾器與單元格值不同時隱藏該行。

此代碼也可以進行優化。

請在這里找到我的JSFiddle

Javascript：

$('.filtert').hide();

var $tableRows = $('#tableRegister .filter-row');
$(".columnfilter").on("change", function() {
  // Builds the filters for all the columns:
  var filters = [];
  $(".columnfilter").each(function() {
    var $that = $(this);
    var value = $that.val();
    if (value != 'all') {
      filters.push({
        at: $that.data('attribute'),
        val: value
      });
    }
  });

  var filtersLength = filters.length;
  if (filtersLength == 0) {
    $('.filtert').hide();
    $tableRows.show();
  } else {
    $('.filtert').show();

    // Apply filters:
    $tableRows.each(function() {
      var $that = $(this);
      var showRow = true;
      for (var i = 0; i < filtersLength; i++) {
        var filter = filters[i];
        var rowAttValue = $(this).data(filter.at);
        if (rowAttValue != filter.val) {
          showRow = false;
          break;
        }
      }

      $that.toggle(showRow);
    });
  }
});

Answer 2

您可以使用:containts搜索text（）。 那么您就不需要所有數據屬性了

$(function(){
        $(".age, .class, .term").change(function(){
            search();
        });

        function search(){
            let ageVal = $('.age').val(),
            classVal = $('.class').val(),
            termVal = $('.term').val();

            $('.filter-row').show(); //reset
            if(ageVal !='all')
                $('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide();

            if(classVal !='all')
                $('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide();

            if(termVal !='all')
                $('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide();
        }

    });

  <p class="filtert"> Filtering </p> <select class="age" data-attribute="age" > <option value="all">Select age</option> <option value="11">11</option> <option value="21">21</option> <option value="30">30</option> <option value="32">32</option> </select> <select class="class" data-attribute="class"> <option value="all">Select Class </option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="term" data-attribute="term"> <option value="all"> Select </option> <option value="Day">Day</option> <option value="Week">Week</option> <option value="Month">Month</option> </select> <br> <table id="tableRegister" border="1"> <tr> <th>Fullname</th> <th>Age</th> <th>Sport</th> <th>Class </th> <th>Term</th> </tr> <tr class="filter-row" data-age="11" data-class="1" data-term="Day"> <td>Thulasiram.S</td> <td>11</td> <td>Chess</td> <td>1</td> <td>Day</td> </tr> <tr class="filter-row" data-age="11" data-class="1" data-term="Month"> <td>ST Ram</td> <td>11</td> <td>Cricket</td> <td>1</td> <td>Month</td> </tr> <tr class="filter-row" data-age="21" data-class="2" data-term="Day"> <td>Ram Kumar.S</td> <td>21</td> <td>Chess</td> <td>2</td> <td>Day</td> </tr> <tr class="filter-row" data-age="30" data-class="3" data-term="Week"> <td>Dinesh Kumar.S</td> <td>30</td> <td>Chess</td> <td>3</td> <td>Week</td> </tr> <tr class="filter-row " data-age="11" data-class="2" data-term="Day"> <td>Raja Ram.S</td> <td>11</td> <td>Football</td> <td>2</td> <td>Day</td> </tr> <tr class="filter-row " data-age="32" data-class="3" data-term="Month"> <td>Priya</td> <td>32</td> <td>Cricket</td> <td>3</td> <td>Month</td> </tr> </table> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $(".age, .class, .term").change(function(){ search(); }); function search(){ let ageVal = $('.age').val(), classVal = $('.class').val(), termVal = $('.term').val(); $('.filter-row').show(); //reset if(ageVal !='all') $('.filter-row td:nth-child(2):not(:contains('+ ageVal +'))').parent().hide(); if(classVal !='all') $('.filter-row td:nth-child(4):not(:contains('+ classVal +'))').parent().hide(); if(termVal !='all') $('.filter-row td:nth-child(5):not(:contains('+ termVal +'))').parent().hide(); } }) </script>