javascript - 根据选择值过滤表行数

Question

例如:选择4 -> 显示4行，选择6 -> 显示6行

• 链接:https://codepen.io/quyen_nguyen/pen/YzXyBrQ

Answer 1

选项值将是数字而不是字符串

<option value="4">4</option>不

<option value="a1">4</option>

$('.filter-handle').on('change', function(e) {
  var $rows =  $('#table').find('tr');
  var showRow = Number(e.target.value)+1;
  $rows.hide().slice(0, showRow).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="filter-handle">
  <option value="4">4</option>
  <option value="6">6</option>
  <option value="8">8</option>
</select>

<table class="filter-table-data" id="table">
  <tr><th scope="col">Name</th><th scope="col">Des</th></tr>
  <tr><td>Vu Tran</td><td>Sunnyvale</a></tr>
  <tr><td>Michelle Case</td><td>Sunnyvale</a></tr>
  <tr><td>Todd Linden</td><td>Madison</a></tr>
  <tr><td>Michael Liston</td><td>Madison</a></tr>
<tr><td>Vu Tran</td><td>Sunnyvale</a></tr>
  <tr><td>Michelle Case</td><td>Sunnyvale</a></tr>
  <tr><td>Todd Linden</td><td>Madison</a></tr>
  <tr><td>Michael Liston</td><td>Madison</a></tr>
<tr><td>Vu Tran</td><td>Sunnyvale</a></tr>
  <tr><td>Michelle Case</td><td>Sunnyvale</a></tr>
  <tr><td>Todd Linden</td><td>Madison</a></tr>
  <tr><td>Michael Liston</td><td>Madison</a></tr>
</table>