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="http://ift.tt/Zv5K7g"></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 :)
Aucun commentaire:
Enregistrer un commentaire