时间戳

首页 > 解决方案 > 用于表的 Jquery 下拉过滤器

javascript - 用于表的 Jquery 下拉过滤器

问题描述

我正在使用我在此处也找到的代码，该代码根据下拉选择过滤表。我不精通 JQuery/Javascript。我的问题是如何使用此代码段“显示所有”数据：

落下：

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    dataset.show();
    dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    }).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

标签： javascriptjqueryhtml

解决方案

您可以检查下拉列表的值，然后过滤它

喜欢

$(document).ready(function($) {
  $('#selectField').change(function() {
  var selection = $(this).val();
  var dataset = $('table').find('tr');
  var unSelectedData;
  dataset.show();
  if (selection !== ' ') {
    var unSelectedData = dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
  }
  if (unSelectedData) {
     unSelectedData.hide();
  }
});
});


$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    var unSelectedData;
    dataset.show();
    if (selection !== ' ') {
    var unSelectedData= dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
    }
    if (unSelectedData) {
      unSelectedData.hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

推荐阅读