如何使用值代替jquery的計算來代替<input type =「number」>

我目前在我的頁面上有抵押支付計算器功能。這工作正常。我需要實現的是將此計算器功能綁定到我在頁面上也有的示例表數據。如何使用值代替jquery的計算來代替<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>

來源

2015-09-25 J. Ayo

使用'數據 - 缺省 - 日期= '12''中'tr'像''存儲一些默認值 –

你可以得到每行中細胞的價值，並在最後一個單元格，然後地方產生的價值。

$('#mortgagetable tr').each(function() { 
    var value = ''; 

    $(this).find(".tg-031e").each(function() { 
     value += $(this).html();  
    }); 

    $(this).find("td:last").html(value); 
});

你只有通過使用負CSS選擇

來源

2015-09-25 07:35:47 Trike

如果我理解這個問題，你要計算給出「初始速度」爲每個每月支付跳過表格的第一行在表格中排，對嗎？

如果是這樣，我認爲下面的代碼應該工作。我在表中添加了一個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');

希望這有助於出去。我試圖評論我的mods到你的代碼片段，所以它應該清楚我提出的解決方案。

$(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>

來源

2015-09-25 08:00:36

是的，差不多就是這樣。它不會重新計算，如果我改變輸入雖然？ –

舊的'

Monthly Repayment: £948.42

'可以被刪除，如果我把這個div取出，我可以刪除任何其他腳本嗎？它會讓更容易使輸出在更改時刷新嗎？ –

我添加到腳本中，以便在您更改表單中的值時重新計算表格。你仍然需要#repayments id作爲放置計算輸出的地方，但它可以是空白的，因爲當頁面加載時，它會運行計算並填充該div。我認爲大部分的JavaScript是完成你想要的東西（雖然它可以被重構爲更清潔）。爲了便於閱讀/調整，我在codepen中添加了相同的代碼http://codepen.io/bunnymatic/pen/GpjLBV –

如何使用​​值代替jquery的計算來代替<input type =「number」>

回答

相關問題

如何使用值代替jquery的計算來代替<input type =「number」>