js - 如何將函數的值輸出到HTML表格中

Question

我創建了一個計算器來顯示貸款期限的還款額。

我已經設法計算每個月的付款，利息，剩餘貸款，但我試圖將其輸出到表中。這些列將是固定的數字（5），但行應根據月數動態更新。

我見過一些類似的帖子，但不能讓它爲我的代碼工作。下面

代碼和jsfiddle

HTML

<div class="mortgageInput"> 
    <form method="POST" name="calc" onclick="validateForm();repayment();return false;"> 
    <label>Amount </label> 
    <input type="textbox" id="loan" value="100000"><br> 
    <label>Years</label> 
    <input type="textbox" id="years" value="15"><br> 
    <label>Rate (%)</label> 
    <input type="textbox" id="rate" value="6.00" onkeyup="calculate"><br> 
    <input type="button" value="Calculate" id="btn"><br> 
    <label>Monthly Repayment</label> 
    <input type="textbox" id="monthlyRepayment"><br> 
    <label>Monthly Interest Only</label> 
    <input type="textbox" id="interest"><br> 
    <label>Monthly Capital Repayment</label> 
    <input type="textbox" id="capitalRepayment"><br> 
    <label>Total Interest</label> 
    <input type="textbox" id="totalInterest"> 
    </form> 
</div> 
<br> 
    Output into table...<p id="demo"></p> 

JS

(document).on("keyup", calculate()); 

function validateForm(){ 
    var validation = true; 
    validation &= calculate(); 
    validation &= pmt(); 
    return validation; 
} 

function calculate() { 
    var p = document.querySelector("#loan").value; 
    var y = document.querySelector("#years").value; 
    var rate = document.querySelector("#rate").value; 
    var r = rate/100/12; 
    var n = y * 12; 

    var I = (p * r); 
    var monthlyPayment = -pmt(r,n,p); 
    var mr = (monthlyPayment - I); 
    var ti = (monthlyPayment) * n - p; 
    var list = JSON.stringify((computeSchedule(p, rate, 12, y, monthlyPayment)), 0, 4); 

    document.querySelector("#interest").value = I.toFixed(2); 
    document.querySelector("#totalInterest").value = ti.toFixed(2); 
    document.querySelector("#capitalRepayment").value = mr.toFixed(2); 
    document.querySelector("#monthlyRepayment").value = monthlyPayment.toFixed(2); 
    document.getElementById("demo").innerHTML = list; 
} 

function pmt(rate,nper,pv) { 
    var pvif, pmt; 

    pvif = Math.pow(1 + rate, nper); 
    pmt = rate/(pvif - 1) * -(pv * pvif); 

    return pmt; 
} 

function computeSchedule(loan_amount, interest_rate, payments_per_year,  years, payment) { 
    var schedule = []; 
    var remaining = loan_amount; 
    var number_of_payments = payments_per_year * years; 

    for (var i=0; i<=number_of_payments; i++) { 
     var interest = remaining * (interest_rate/100/payments_per_year); 
     var principle = (payment-interest); 
     var row = [i, payment, interest>0?interest:0, principle>0?principle:0, remaining>0?remaining:0]; 
     schedule.push(row); 
     remaining -= principle 
    } 

    return schedule; 
} 

Answer 1

上面的答案是正確的，但如果對性能的關注做外循環

var list = computeSchedule(p, rate, 12, y, monthlyPayment); 
var tables = ""; 
for (var i = 0; i < list.length; i++) { 
    tables += "<tr>" + 
    "<td>" + list[i][0] + "</td>" + 
    "<td>" + list[i][1] + "</td>" + 
    "<td>" + list[i][2] + "</td>" + 
    "<td>" + list[i][3] + "</td>" + 
    "<td>" + list[i][4] + "</td>" + 
    "</tr>"; 
} 
document.getElementById("demo").innerHTML = '<table>' + tables + '</table>'; 

Answer 2

我不知道如果我理解正確，但是這通常應該是解決方案。你在打印一些js錯誤，我沒有修正它們在這個例子中。

function validateForm(){ 
 
    var validation = true; 
 
    validation &= calculate(); 
 
    validation &= pmt(); 
 
    return validation; 
 
} 
 

 
function calculate() { 
 
    var p = document.querySelector("#loan").value; 
 
    var y = document.querySelector("#years").value; 
 
    var rate = document.querySelector("#rate").value; 
 
    var r = rate/100/12; 
 
    var n = y * 12; 
 

 
    var I = (p * r); 
 
    var monthlyPayment = -pmt(r,n,p); 
 
    var mr = (monthlyPayment - I); 
 
    var ti = (monthlyPayment) * n - p; 
 
    var list = JSON.stringify((computeSchedule(p, rate, 12, y, monthlyPayment)), 0, 4); 
 

 
    document.querySelector("#interest").value = I.toFixed(2); 
 
    document.querySelector("#totalInterest").value = ti.toFixed(2); 
 
    document.querySelector("#capitalRepayment").value = mr.toFixed(2); 
 
    document.querySelector("#monthlyRepayment").value = monthlyPayment.toFixed(2); 
 
    
 
    var list = computeSchedule(p, rate, 12, y, monthlyPayment); 
 
    console.log(list.length); 
 
    for (var i=0; i < list.length; i++) { 
 
    \t document.getElementById("test").innerHTML += "<tr><td>" + list[i][0] + "</td><td>" + list[i][1] + "</td><td>" + list[i][2] + "</td><td>" + list[i][3] + "</td><td>" + list[i][4] + "</td></tr>"; 
 
    } 
 
} 
 

 
function pmt(rate,nper,pv) { 
 
    var pvif, pmt; 
 

 
    pvif = Math.pow(1 + rate, nper); 
 
    pmt = rate/(pvif - 1) * -(pv * pvif); 
 

 
    return pmt; 
 
} 
 

 
function computeSchedule(loan_amount, interest_rate, payments_per_year, years, payment) { 
 
    var schedule = []; 
 
    var remaining = loan_amount; 
 
    var number_of_payments = payments_per_year * years; 
 

 
    for (var i=0; i<=number_of_payments; i++) { 
 
     var interest = remaining * (interest_rate/100/payments_per_year); 
 
     var principle = (payment-interest); 
 
     var row = [i, payment, interest>0?interest:0, principle>0?principle:0, remaining>0?remaining:0]; 
 
     schedule.push(row); 
 
     remaining -= principle 
 
    } 
 

 
    return schedule; 
 
}

table { 
 
    border-spacing: 0; 
 
} 
 

 
table td { 
 
    border: 1px solid #666; 
 
    padding: 0 3px; 
 
}

<div class="mortgageInput"> 
 
<form method="POST" name="calc" onclick="validateForm();repayment();return false;"> 
 
    <label>Amount </label> 
 
    <input type="textbox" id="loan" value="100000"><br> 
 
    <label>Years</label> 
 
    <input type="textbox" id="years" value="15"><br> 
 
    <label>Rate (%)</label> 
 
    <input type="textbox" id="rate" value="6.00" onkeyup="calculate"><br> 
 
    <input type="button" value="Calculate" id="btn"><br> 
 
    <label>Monthly Repayment</label> 
 
    <input type="textbox" id="monthlyRepayment"><br> 
 
    <label>Monthly Interest Only</label> 
 
    <input type="textbox" id="interest"><br> 
 
    <label>Monthly Capital Repayment</label> 
 
    <input type="textbox" id="capitalRepayment"><br> 
 
    <label>Total Interest</label> 
 
    <input type="textbox" id="totalInterest"> 
 
    </form> 
 
</div> 
 
<br> 
 
<table id="test"> 
 

 
</table>

Answer 3

的computeSchedule結果包含二維數組插入HTML。您應該可以通過兩個嵌套for循環循環。然後你可以撰寫你的表格。

很簡單的例子是這樣的：

var demoList = computeSchedule(p, rate, 12, y, monthlyPayment); 

var table = "<table>"; 

for (var rowIndex=0; rowIndex <= n; rowIndex++) { 
    var row = "<tr><td>#" + rowIndex + "</td>"; 
    for(var colIndex = 0; colIndex < 4; colIndex++) { 
     row += "<td>" + demoList[rowIndex][colIndex] + "</td>"; 
    } 
    table += row + "</tr>"; 
} 
document.getElementById("output").innerHTML = table + "</table>"; 

您也可以嘗試在這裏生活版本：https://fiddle.jshell.net/aua4g8e7/