Using table cell value for javascript not <td class>

Question

I have following table test data which is filtered using checkboxes. I want the <script> to use the value in each <td> and not the <td class> in order to show/hide rows based on the checkbox selections.

Is this possible by amending my current script in a simple way? it would make it a lot easier using the data I have to simple use the values rather than having to manually change the class as I add rows?

 $(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> 

Any help would be much appreciated, thanks :)

Answer 1

I believe the best way is to use data-* attributes : just add data-value="the value" or whatever you want to call it. To fix your JS code simply change this

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

by this

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

The other way would be to use :contains , here you can find how to use it. The problem with this solution is that it matches substrings, which could not be the desired behavior and can lead to incorrect results.