根据 select 值过滤 table 行

Question

我需要根据 select 值过滤 table 行。当 selected 值为 ""（空）时 table 必须隐藏。如果 select 值假设为 1，则 table 必须可见，并且它必须仅显示第一个 table 列包含值 1 的行。

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

我的select或

<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

<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

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

Answer 1

您可以根据包含[=36=]ids:[=20]的td的内容过滤行=]

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

tr

现在过滤不需要显示的 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>

Answer 2

尝试使用下面的代码

$("#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();
                       }
                   });
           });

Answer 3

这是一个您可以测试的解决方案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();
          }
        }
      });
    });
});

Answer 4

使用 :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']();
        });
      }

    });
});

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

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

根据 select 值过滤 table 行

Filter table rows based on select value

html

javascript

arrays

jquery

jquery-selectors