How to use <td> value for jquery calculation in place of <input type=“number”>
Question
I currently have a mortgage payment calculator function on my page. This works fine. What I need to achieve is tying this calculator function to the sample table data that I also have on the page.
Basically what I am trying to achieve is to have each <tr> use the 'initial rate' value in that row for the function repayment() calculation. I then want the output of this to appear in the same <tr> in the 'monthly repayment' cell.
Any help checking out how I can do this using the current would be really appreciated. My guess is that I somehow need to parse the value of every in the interest rate column, but I don't know how to do this?
$(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(); }); }); }); window.onload = function() { document.repaymentcalc.homevalue.onchange = repayment; document.repaymentcalc.loanamount.onchange = repayment; document.repaymentcalc.interestrate.onchange = repayment; document.repaymentcalc.numberpayments.onchange = repayment; } function repayment() { var x = parseInt(document.repaymentcalc.loanamount.value, 10); var y = parseInt(document.repaymentcalc.interestrate.value * 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; var year = z / 12; document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repayment.toFixed(2); document.getElementById("ltv").innerHTML = 'Loan to Value: ' + loantovalue.toFixed(1) + '%'; document.getElementById("years").innerHTML = year + ' years'; }
<head> <link rel="stylesheet" type="text/css" href="table.css"> </head> <body style="font-family: arial;"> <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> <form name="repaymentcalc" action=""> </br> <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> Interest Rate <input type="number" id="interestrate" value="3.00" style="width: 50px">% </p> Term <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px"> <div id="years" style="display:inline-block;">25 years </div> <div id="repayments">Monthly Repayment: £948.42</div> <p> <div id="ltv">Loan to Value: 80.0%</div> </div> </form> <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>
2 answers
solution1
1 2015-09-25 07:35:47
You can get value of cells in each row and then place resulting value in the last cell.
$('#mortgagetable tr').each(function() {
var value = '';
$(this).find(".tg-031e").each(function() {
value += $(this).html();
});
$(this).find("td:last").html(value);
});
You have only to skip the first row of the table by using negative css selector
solution2
1 2015-09-25 08:00:36
If I understand the question, you're trying to compute the monthly payment given the "initial rate" for each row in the table, right?
If so, I think the following code should work. I added a tbody and thead element to the table so it'd be easy to pull out only the "data" rows. I added a new function called computeRepayment which only does the math for the repayment number. The function repayment then uses that function and updates the dom accordingly (for all the onchange things).
Lastly, I made the computeRepayment function take an optional rate so that if the rate is there, it uses it. If not, it pulls it from your input.
If this seems right, you might make the column finding a bit easier by adding a class to each of the interestrate elements and the payment elements. Like
<tr class="product">
<td class="tg-031e">Nationwide</td>
...
<td class="rate tg-031e">1.79</td>
...
<td class="tg-031e">20,000</td>
<td class="payment tg-031e"></td>
</tr>
which would make the javascript a bit clearer to find those columns in the row. Based on my code, it would change this
var initialRateCell = $row.find('td')[3];
to this
var initialRateCell = $row.find('.rate');
Hopefully this helps out. I tried to comment my mods to your code snippets so it should be clear what I've proposed as a solution.
$(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(); }); }); }); window.onload = function() { document.repaymentcalc.homevalue.onchange = repayment; document.repaymentcalc.loanamount.onchange = repayment; document.repaymentcalc.interestrate.onchange = repayment; document.repaymentcalc.numberpayments.onchange = repayment; // initialize on page load repayment(); } function populateRepaymentTable() { // populate repayment in table console.log("GO") $('tbody tr').each(function(idx, row) { var $row = $(row); var initialRateCell = $row.find('td')[3]; var repaymentCell = $row.find('td').last() var rate = parseFloat($(initialRateCell).html()); var repaymentVal = computeRepayment(rate); console.log(repaymentVal) $(repaymentCell).html(repaymentVal.repayment); }); } function computeRepayment(rate) { var rate = rate || document.repaymentcalc.interestrate.value 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; var year = z / 12; return { repayment: repayment, loantovalue: loantovalue, year: year } } function repayment() { var repaymentInfo = computeRepayment() document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repaymentInfo.repayment.toFixed(2); document.getElementById("ltv").innerHTML = 'Loan to Value: ' + repaymentInfo.loantovalue.toFixed(1) + '%'; document.getElementById("years").innerHTML = repaymentInfo.year + ' years'; populateRepaymentTable(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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> <form name="repaymentcalc" action=""> </br> <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> Interest Rate <input type="number" id="interestrate" value="3.00" style="width: 50px">% </p> Term <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px"> <div id="years" style="display:inline-block;">25 years </div> <div id="repayments">Monthly Repayment: £948.42</div> <p> <div id="ltv">Loan to Value: 80.0%</div> </div> </form> <br> <div id="mortgagediv"> <table id="mortgagetable"> <thead> <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> </thead> <tbody> <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> </tbody> </table> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to use jQuery to store number inputs to variables and performing calculation to update number input again?
How to get td innerhtml values except input type=“hidden” in jquery
HTML 5 “number” type input has no value when typing a decimal place
Increment the value of an input type number using jQuery
Use a pattern to format value in input of type Number
How to get an input value of input type number?
How to use value in input type number for calculate and set value in to other input?
Set Value of input type in <td> through javascript
Getting td value and print it in input text by jquery
Jquery: Unable to set value of input to table td
Related Tags