[英]How to use <td> value for jquery calculation in place of <input type=“number”>
我目前在頁面上有抵押付款計算器功能。 這很好。 我需要實現的是將此計算器功能與頁面上的樣本表數據相關聯。
基本上，我想要實現的是讓每個<tr>使用該行中的“初始匯率”值進行function repayment()計算。 然后，我希望此輸出在“每月還款”單元格中的相同<tr>中出現。
非常感謝您檢查出如何使用當前版本執行此操作的任何幫助。 我的猜測是，我需要以某種方式解析“利率”列中每個值的值，但是我不知道該怎么做？
$(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>
您可以獲取每行中單元格的值，然后將結果值放在最后一個單元格中。
$('#mortgagetable tr').each(function() {
var value = '';
$(this).find(".tg-031e").each(function() {
value += $(this).html();
});
$(this).find("td:last").html(value);
});
您只需要使用負的CSS選擇器來跳過表的第一行
如果我理解這個問題，那么您正在嘗試根據表中每一行的“初始費率”來計算每月付款，對嗎？
如果是這樣，我認為下面的代碼應該工作。 我在表中添加了一個tbody和thead元素，因此很容易僅提取“數據”行。 我添加了一個名為computeRepayment的新函數，該函數僅對還款數進行數學運算。 然后，功能repayment使用該功能並相應地更新dom（對於所有onchange事物）。
最后，我使computeRepayment函數采用可選rate以便在存在利率的情況下使用它。 如果沒有，它將從您的輸入中拉出。
如果這似乎是正確的，則可以通過將類添加到每個interestrate元素和payment元素來使查找列更容易。 喜歡
<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>
這樣會使javascript更加清晰，從而可以找到行中的那些列。 根據我的代碼，它將改變
var initialRateCell = $row.find('td')[3];
對此
var initialRateCell = $row.find('.rate');
希望這會有所幫助。 我試圖在您的代碼段中評論我的mod，因此應該清楚我提出的解決方案。
$(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>
如何使用jQuery將數字輸入存儲到變量並執行計算以再次更新數字輸入？
[英]How to use jQuery to store number inputs to variables and performing calculation to update number input again?
如何在jQuery中獲取除input type =“ hidden”之外的td innerhtml值
[英]How to get td innerhtml values except input type=“hidden” in jquery
如何使用輸入類型編號中的值來計算和設置其他輸入中的值？
[英]How to use value in input type number for calculate and set value in to other input?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.