如何根据鼠标单击时的选择选项仅显示 html 表中的行？答案

【问题标题】：How to show only rows in a html table according to select option on mouse click?如何根据鼠标单击时的选择选项仅显示 html 表中的行？
【发布时间】：2018-05-04 17:54:28
【问题描述】：

在我的表格中，我只想显示在下拉列表中选择的那些行。

例如：

通过选择“全部”选项，表格应显示所有行。
通过选择“2017”选项，表格应仅显示第二列中包含“2017”的行。
通过选择“2018”选项，表格应仅显示第二列中包含“2018”的行。

我希望在下拉列表中选择年份时显示行。

  <select name="year">
     <option value="All">All</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select> 
  
  <br><br>
<table border="1">
<tr><td width="5%"> 1 </td><td width="30%">2017</td></tr> <br>
<tr><td> 2 </td><td>2018</td>
<tr><td> 3 </td><td>2017</td>
<tr><td> 4 </td><td>2017</td>
<tr><td> 5 </td><td>2018</td>
<tr><td> 6 </td><td>2017</td>
<tr><td> 7 </td><td>2018</td>
</tr>
</table>

【问题讨论】：

您可以使用下拉菜单的更改事件来知道何时隐藏行
向每个 tr 标签添加类，您可以使用 Javascript 切换可见性
或者尝试使用Datatables库

标签： javascript jquery html

【解决方案1】：

试试这个

$(document).ready(function(){
  $("#year").on('click', function(){
    var yr = $(this).val();
    $("table tr").each(function(index){
      var val = $(":nth-child(2)", this).html();
      if(yr === 'All') {
        $(this).show();
      } else if(val == yr) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  })
;

  $("#year").trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year" name="year">
     <option value="All">All</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select> 
  
  <br><br>
<table border="1">
<tr><td width="5%"> 1 </td><td width="30%">2017</td></tr> <br>
<tr><td> 2 </td><td>2018</td>
<tr><td> 3 </td><td>2017</td>
<tr><td> 4 </td><td>2017</td>
<tr><td> 5 </td><td>2018</td>
<tr><td> 6 </td><td>2017</td>
<tr><td> 7 </td><td>2018</td>
</tr>
</table>

【讨论】：

只有一件事没有到位，即如果我使用 Selected 选项，它仍然会显示所有数据。
为此，您可以在就绪函数中触发点击事件。在上面的代码中添加了，请看它是否有效。
请帮我在移动浏览器中完成这项工作。我在手机中按了两次

【解决方案2】：

在我看来，最简单和简洁的方法是在你想要分组的任何地方添加一个类属性。

<tr class="y2018" ><td> 2 </td><td>2018</td>
<tr class="y2017" ><td> 3 </td><td>2017</td>
<tr class="y2017" ><td> 4 </td><td>2017</td>
<tr class="y2018"><td> 5 </td><td>2018</td>

您还可以添加更多类来分组您想要的任何内容。

<tr class="y2018 orange" ><td> 2 </td><td>2018</td>
<tr class="y2017 orange" ><td> 3 </td><td>2017</td>
<tr class="y2017 apple" ><td> 4 </td><td>2017</td>
<tr class="y2018 apple"><td> 5 </td><td>2018</td>

那你就可以了

$(".y2018").hide();

或例如

$(".orange").css({"background-color":"#000"});

之前当用户更改选择组件时，您会获得选择值。

$("select").change(function(){

var value = $("select").val();

if(value == 2017){
//do somethig like
$(".y2018").hide();
}

});

【讨论】：

【解决方案3】：

不添加类和ID，你可以这样做：

$( document ).ready(function() {
   // When the select box is changed
  $("select[name=year]").on("change",function(){
     // if the value isn't the default
    if($(this).val() != "All"){
        // loop each row
      $("table tr").each(function(){
       // if the second <td> value isnt the same as the select box
       if( $("td:eq(1)", this).text() != $("select[name=year]").val() ){
          $(this).hide();   // Hide it
       }else{
          $(this).show();  // Else show it
       }

      });    
     // And if the user selects "All", then show all the rows again
     }else{

            $("table tr").show();
    }
  });

});

【讨论】：