根据选择值过滤表行答案

【问题标题】：Filter table rows based on select value根据选择值过滤表行
【发布时间】：2017-05-24 01:49:53
【问题描述】：

我需要根据选择值过滤表行。当所选值为“”（空）表必须隐藏。如果选择值是 1，则表必须是可见的，并且它必须只显示第一个表列保存值 1 的行。

问题是这个 id 列包含多个 id，例如 1,2。由于我的 JQuery 技能不是最好的，我需要你们帮助我完成我的代码

我的选择器

<select id='mySelector'>
   <option value="">Please Select</option>
   <option value='1'>A</option>
   <option value='2'>B</option>
   <option value='3'>C</option>
</select>

我的桌子

<table id='myTable'>
   <thead>
      <tr>
         <th>ids</th>
         <th>name</th>
         <th>address</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1,2</td>
         <td>Jhon</td>
         <td>Doe</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Mike</td>
         <td>Poet</td>
      </tr>
      <tr>
         <td>2,3</td>
         <td>Ace</td>
         <td>Ventura</td>
      </tr>
   </tbody>
 </table>

我的脚本

$(document).ready(function($) {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');
          $.each(dataset, function(index, item) {
            //help
          });
    });
});

这里正在工作plunker

如果您需要任何其他信息，请告诉我，我会提供。提前谢谢你。

【问题讨论】：

您可以控制标记吗？例如，您能否更改表格标记？如果您可以向标记添加一些属性，这会更简单：例如<tr data-id="[2,3]">。
是的，我可以控制标记

标签： javascript jquery html arrays jquery-selectors

【解决方案1】：

您可以根据包含 ids 的td 的内容过滤行：

您的数据集必须是$('#myTable tbody').find('tr')，这样它就不会显示/隐藏thead
首先使用dataset.show()显示所有表trs

现在过滤您不需要显示的trs：

dataset.filter(function(index, item) {
  return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
}).hide();

请看下面的演示：

$(document).ready(function($) {
  $('table').hide();
  $('#mySelector').change(function() {
    $('table').show();
    var selection = $(this).val();
    var dataset = $('#myTable tbody').find('tr');
    // show all rows first
    dataset.show();
    // filter the rows that should be hidden
    dataset.filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();

  });
});

/* Styles go here */

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.styled-select.slate {
  height: 34px;
  width: 240px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="script.js"></script>

<select id='mySelector' class="styled-select slate">
  <option value="">Please Select</option>
  <option value='1'>A</option>
  <option value='2'>B</option>
  <option value='3'>C</option>
</select>
<br>
<br>
<br>
<table id='myTable'>
  <thead>
    <tr>
      <th>ids</th>
      <th>name</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1,2</td>
      <td>Jhon</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>Poet</td>
    </tr>
    <tr>
      <td>2,3</td>
      <td>Ace</td>
      <td>Ventura</td>
    </tr>
  </tbody>
</table>

【讨论】：

我喜欢通过代码和解决方案进行的解释！谢谢
注意：应使用缩小版的jQuery。
@kukkuz- 我已经尝试过您的代码。但它不起作用。我将文本框过滤器用作每列的行标题，并使用 keyup 函数显示与过滤器文本框中输入的文本匹配的行。我们如何使用您的代码来实现这一目标。

【解决方案2】：

使用:contains() 选择器的简短解决方案：

$(document).ready(function($) {
    $('table').hide();

    $('#mySelector').change( function(){
      var selection = $(this).val();
      $('table')[selection? 'show' : 'hide']();

      if (selection) {  // iterate only if `selection` is not empty
        $.each($('#myTable tbody tr'), function(index, item) {
          $(item)[$(item).is(':contains('+ selection  +')')? 'show' : 'hide']();
        });
      }

    });
});

测试链接：https://plnkr.co/edit/zNQNFVBIPSyPjEyU7I1J?p=preview

http://api.jquery.com/contains-selector/

【讨论】：

【解决方案3】：

试试下面的代码

$("#mySelector").on("change",
           function(){
               var a = $(this).find("option:selected").html();

               $("table tr td:first-child").each(
                   function(){
                       if($(this).html() != a){
                           $(this).parent().hide();
                       }
                       else{
                           $(this).parent().show();
                       }
                   });
           });

【讨论】：

【解决方案4】：

这是一个你可以测试的解决方案here

$(function() {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');

      dataset.each(function(index) {
        item = $(this);
        item.hide();

        var firstTd = item.find('td:first-child');
        var text = firstTd.text();
        var ids = text.split(',');

        for (var i = 0; i < ids.length; i++)
        {
            if (ids[i] == selection)
          {
            item.show();
          }
        }
      });
    });
});

【讨论】：