HTML表格过滤

Question

我有一个html表格，我希望让我的用户通过选择多个下拉列表并按下按钮来筛选出符合条件的行，例如页面长于x，流派是y等。

我该怎么做？我需要什么样的编码？

我是编码的新手，所以我需要一些虚假的解释。

表格示例如下。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-yw4l">Book Name</th>
    <th class="tg-yw4l">Book Pages</th>
    <th class="tg-yw4l">Genre</th>
    <th class="tg-yw4l">Link</th>
  </tr>
  <tr>
    <td class="tg-yw4l">aaa</td>
    <td class="tg-yw4l">1</td>
    <td class="tg-yw4l">a</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
  <tr>
    <td class="tg-yw4l">aaa</td>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">a</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
  <tr>
    <td class="tg-yw4l">sss</td>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">a</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
  <tr>
    <td class="tg-yw4l">dds</td>
    <td class="tg-yw4l">4</td>
    <td class="tg-yw4l">b</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
  <tr>
    <td class="tg-yw4l">ddd</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">b</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
  <tr>
    <td class="tg-yw4l">fff</td>
    <td class="tg-yw4l">6</td>
    <td class="tg-yw4l">b</td>
    <td class="tg-yw4l">aaa</td>
  </tr>
</table>