javascript - 使用 <td> 而不是 <tr> 显示/隐藏行

Question

我正在尝试使用<td class="t1 t4">Fixed</td>而不是<tr class="t1 t4">在我的代码中。这是因为我可能有很多过滤数据的方法，而且它只会变得困惑。 但是，如何使用它来过滤整行，而不仅仅是单元格？

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });
});

$(document).ready(function() {
  $("#fee :checkbox").click(function() {
    $("td").hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t1" id="t1" />Fixed
  <br>
  <input type="checkbox" name="type" value="t2" id="t2" />Variable
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />Tracker
  <br>
  <input type="checkbox" name="type" value="t4" id="t4" checked/>All
  <br>
</section>

<section id="fee">
<p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f1" id="f1" />Fee
  <br>
  <input type="checkbox" name="fee" value="f2" id="f2" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" checked/>All
  <br>
</section>

<div id="mortgagediv">
<table id="mortgagetable">
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t1 t4">Fixed</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.64</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">70</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t2 t4">Variable</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.69</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">75</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t3 t4">Tracker</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.79</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">80</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
<tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t1 t4">Fixed</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.64</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">70</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t2 t4">Variable</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.69</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">75</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t3 t4">Tracker</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.79</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">80</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
</table>
</div>

Answer 1

你的意思是

$(function() {
  $(":checkbox").on("click",function() {
    $(".product").hide();
    $(":checkbox:checked").each(function() {
      console.log($(this).val());
      $("." + $(this).val()).parent().toggle(1);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t1" id="t1" />Fixed
  <br>
  <input type="checkbox" name="type" value="t2" id="t2" />Variable
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />Tracker
  <br>
  <input type="checkbox" name="type" value="t4" id="t4" checked/>All
  <br>
</section>

<section id="fee">
<p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f1" id="f1" />Fee
  <br>
  <input type="checkbox" name="fee" value="f2" id="f2" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" checked/>All
  <br>
</section>

<div id="mortgagediv">
<table id="mortgagetable">
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t1 t4">Fixed</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.64</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">70</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t2 t4">Variable</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.69</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">75</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t3 t4">Tracker</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.79</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f1 f3"></td>
    <td class="tg-031e">80</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
<tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t1 t4">Fixed</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.64</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">70</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t2 t4">Variable</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.69</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">75</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
  <tr class="product">
    <td class="tg-031e">Nationwide</td>
    <td class="t3 t4">Tracker</td>
    <td class="tg-031e">24</td>
    <td class="tg-031e">1.79</td>
    <td class="tg-031e">3.99</td>
    <td class="tg-031e">3.40</td>
    <td class="f2 f3"></td>
    <td class="tg-031e">80</td>
    <td class="tg-031e">5,000</td>
    <td class="tg-031e">20,000</td>
    <td class="tg-031e"></td>
  </tr>
</table>
</div>