![](/img/trans.png)
[英]Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
[英]Using table cell value for javascript not <td class>
我有以下表格測試數據,使用復選框進行了過濾。 我希望<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>
任何幫助將不勝感激,謝謝:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.