时间戳

首页 > 解决方案 > 如何根据鼠标单击时的选择选项仅显示 html 表中的行？

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

问题描述

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

例如：

  1. 通过选择“全部”选项，表格应显示所有行。
  2. 通过选择“2017”选项，表格应仅显示第二列中包含“2017”的行。
  3. 通过选择“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>

标签： javascriptjqueryhtml

解决方案

尝试这个

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

推荐阅读