不为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-*属性 ：只需添加data-value="the value"或任何您想调用的属性即可。 要修复您的JS代码，只需更改此

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

这样

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

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