使用Jquery的多个Checkbox表过滤器（SQL）

Question

我尝试使用复选框创建多个过滤器，任何帮助？ 如果我将find('td')更改为find('td:first')或最后一次，此次运行仅限于第一列，为什么如果我不做任何事情，这不会有效？

＆＃13;

＆＃13;

$(function() {
  $('input[type="checkbox"]').change(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
      // Get values all checked boxes
      var vals = $('input[type="checkbox"]:checked').map(function() {
        return this.value;
      }).get();
      $('tbody tr')
        .hide() // 1
        .filter(function() { // 2
          return vals.indexOf($(this).find('td').text()) > -1;
        }).show();
    } else {
      $('tbody tr').show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>numbers</tr>
    <div>
      <input class="inp-num" type="checkbox" name="inst" value="1">1<br/>
      <input class="inp-num" type="checkbox" name="inst" value="2">2<br/>
      <input class="inp-num" type="checkbox" name="inst" value="3">3<br/>
    </div>
    <tr>colors</tr>
    <div>
      <input class="inp-num" type="checkbox" name="inst" value="red">red<br/>
      <input class="inp-num" type="checkbox" name="inst" value="blue">blue<br/>
      <input class="inp-num" type="checkbox" name="inst" value="yellow">yellow<br/>
    </div>
    <tr>animals</tr>
    <div>
      <input class="inp-num" type="checkbox" name="inst" value="tiger">tiger<br/>
      <input class="inp-num" type="checkbox" name="inst" value="elefant">elefant<br/>
      <input class="inp-num" type="checkbox" name="inst" value="mouse">mouse<br/>
    </div>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>red</td>
      <td>blue</td>
      <td>yellow</td>
    </tr>
    <tr>
      <td>tiger</td>
      <td>elefant</td>
      <td>mouse</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;