使用 javascript 的表格单元格值而不是 <td class>

Question

我有使用复选框过滤的下表测试数据。我希望 <script> 使用每个 <td> 而不是 <td class> 中的值，以便根据复选框选择显示/隐藏行。

这可以通过以简单的方式修改我当前的脚本来实现吗？使用我必须简单地使用值而不是在添加行时手动更改类会更容易吗？

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").parent().hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
  $("#fee :checkbox").click(function() {
    $("td").parent().hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().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>

<br>

<div id="mortgagediv">
  <table id="mortgagetable">
    <tr class="productheader">
      <th class="lender">Lender</th>
      <th class="type">Type</th>
      <th class="inititalmths">Initital Term (mths)</th>
      <th class="inititalrate">Initial Rate (%)</th>
      <th class="svr">SVR (%)</th>
      <th class="apr">Overall APR (%)</th>
      <th class="fee">Fee (£)</th>
      <th class="ltv">LTV (%)</th>
      <th class="minamount">Min Amount (£)</th>
      <th class="maxamount">Max Amount (£)</th>
      <th class="repayment">Monthly Repayment (£)</th>
    </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="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

我认为最好的方法是使用data-* attributes：只需添加data-value="the value" 或任何您想调用的名称。要修复您的 JS 代码，只需更改此代码

$("." + $(this).val()).parent().show();

通过这个

$("[data-type='" + $(this).val() + '"').parent().show();

另一种方法是使用:contains，here，您可以找到如何使用它。此解决方案的问题在于它匹配子字符串，这可能不是所需的行为，并且可能导致不正确的结果。