jquery - Filter table rows based on JavaScript calculation output -
i need filter rows in following table based on output of javascript calculation.
i need output of:
var loantovalue = x / h * 100; to filter rows if value of loantovalue more value of <td class="ltv">.
i not sure how go doing this? appreciated please.
i filter data elsewhere using checkboxes, , use this:
$(document).ready(function() { $("#type :checkbox").click(function() { $("td").parent().hide(); $("#type :checkbox:checked").each(function() { $("." + $(this).val()).parent().show(); });` so guess need similar output of loantovalue?
$(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(); }); }); }); var repayment = function() { }; window.onload = function() { document.repaymentcalc.homevalue.onchange = repayment; document.repaymentcalc.loanamount.onchange = repayment; document.repaymentcalc.numberpayments.onchange = function() { $('#years').html(this.value + ' years'); }; makesomething(); }; function makesomething() { $('tbody tr').each(function(idx, row) { var $row = $(row); var initialratecell = $row.find('td')[2]; var repaymentcell = $row.find('td')[7]; var rate = parsefloat($(initialratecell).html()); var repaymentval = computerepayment(rate); $(repaymentcell).html(repaymentval.repayment); }); } $("#myform :input").change(function() { makesomething(); }); function computerepayment(rate) { var x = parseint(document.repaymentcalc.loanamount.value, 10); var y = parseint(rate * 100, 10) / 120000; var z = parseint(document.repaymentcalc.numberpayments.value, 10) * 12; var h = parseint(document.repaymentcalc.homevalue.value, 10); var repayment = y * x * math.pow((1 + y), z) / (math.pow((1 + y), z) - 1); var loantovalue = x / h * 100; $('#ltv').text('loan value: ' + loantovalue.tofixed(2) + '%'); var year = z / 12; return { repayment: '£' + repayment.tofixed(2), loantovalue: loantovalue, year: year } }<html> <head> <link href='https://fonts.googleapis.com/css?family=droid+sans' rel='stylesheet' type='text/css'> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="repaymentcalc" id="myform" action=""> <h3>mortgage needs</h3> <p>home value £<input type="number" id="homevalue" value="250000" style="width: 75px"></p> <p>loan amount £<input type="number" id="loanamount" value="200000" style="width: 75px"></p> <p id="ltv">loan value: 80.0%</p> <section id="type"> <p id="mortgage type">mortgage type</p> <input type="checkbox" name="type" value="t2" id="t2" checked/>2yr fixed<br> <input type="checkbox" name="type" value="t3" id="t3" checked/>3yr fixed<br> <input type="checkbox" name="type" value="t5" id="t5" checked/>5yr fixed<br> </section> <section id="fee"> <p id="fee">fee</p> <input type="checkbox" name="fee" value="fee" id="fee" checked/>fee<br> <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>no fee<br> </section> term <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 75px"> <p id="years" style="display:inline-block;"> 25 years</p> </form> <table id="mortgagetable"> <thead> <tr class="producthd"><th class="lenderhd">lender</th><th class="typehd">mortgage type</th><th class="initialratehd">initial rate (%)</th><th class="rateshd">reversion rate (%)</th><th class="rateshd">overall apr (%)</th><th class="feehd">product fee (£)</th><th class="ltvhd">maximum ltv (%)</th><th class="repaymenthd">initial repayment</th><th class="applylinkhd"></th></tr> </thead> <tbody> <tr class="product"><td class="lender"></td><td class="t2">2yr fixed</td><td class="initialrate">1.29</td><td class="rates">4.74</td><td class="rates">4.3</td><td class="fee">999</td><td class="ltv">60</td><td class="repayment"></td></td></tr> <tr class="product"><td class="lender"></td><td class="t2">2yr fixed</td><td class="initialrate">1.39</td><td class="rates">4.24</td><td class="rates">3.9</td><td class="fee">1495</td><td class="ltv">60</td><td class="repayment"></td><td class="applylink"></td></tr> </tbody> </table>
in document ready function add following code:
filterbymaxltv(); function filterbymaxltv() { $("#mortgagetable tbody tr").each(function () { var l = parsefloat($('#loanamount').val()); var h = parsefloat($('#homevalue').val()); var lonetovalue = parsefloat((l/h)*100).tofixed(2); $('#ltv').text('loan value: ' + lonetovalue + '%'); //get number right td. var x = parsefloat($(this).find(".ltv").text()); console.log(x); if(x>lonetovalue){ $(this).hide(); } else{ $(this).show(); } }); } $('#homevalue,#loanamount').change(function(){ filterbymaxltv(); }); what doing here have created 1 function filter values. , calling same function on page load (document ready), , on textbox value change.
note: calculation can wrong. may have put wrong sign (less than/ greater than)
also refer this jsfiddle - here keyup function used instead of change function make more dynamic
Comments
Post a Comment