javascript - 表的 Jquery 下拉过滤器

Question

我正在使用我在这里找到的代码，该代码根据下拉列表选择来过滤表格。我不太熟悉 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>

Answer 1

您可以检查下拉列表的值，然后对其进行过滤

喜欢

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