根据选择值过滤表行

Posted 2023-03-05

【中文标题】根据选择值过滤表行

【英文标题】：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]">。

是的，我可以控制标记

【参考方案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>

【讨论】：

我喜欢通过代码和解决方案进行的解释！谢谢

注意：应使用缩小版的jQu​​ery。

@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();
          
        
      );
    );
);