Question

我正在尝试将以下代码中的表链接到表单和脚本。我需要根据“初始费率”列中的值计算每行的每月还款（并使用脚本中已有的计算来查找var还款，但我很难找到让单元格更新的方法，以及如何找到一种方法来优雅地解析每个“初始速率”值。

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';

}

<form name="repaymentcalc" action="">
  <div align="center">
    <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>
    </p>
  </div>
</form>

<table>
  <tr>
    <th>Mortgage Lender</th>
    <th>Max LTV</th>
    <th>SVR</th>
    <th>Fee</th>
    <th>Max Amount</th>
    <th>Type</th>
    <th>Length (months)</th>
    <th>Initial Rate</th>
    <th>Monthly Repayment</th>
  </tr>
  <tr>
    <td>Halifax</td>
    <td>75</td>
    <td>3.99</td>
    <td>999</td>
    <td>1000000</td>
    <td>Fixed</td>
    <td>24</td>
    <td>1.19</td>
    <td></td>
  </tr>
  <tr>
    <td>HSBC</td>
    <td>80</td>
    <td>3.49</td>
    <td>0</td>
    <td>1000000</td>
    <td>Fixed</td>
    <td>24</td>
    <td>1.49</td>
    <td></td>
  </tr>
  <tr>
    <td>Nationwide</td>
    <td>90</td>
    <td>3.99</td>
    <td>199</td>
    <td>1000000</td>
    <td>Fixed</td>
    <td>36</td>
    <td>1.49</td>
    <td></td>
  </tr>
  <tr>
    <td>Yorkshire Building Society</td>
    <td>60</td>
    <td>2.49</td>
    <td>0</td>
    <td>2000000</td>
    <td>Fixed</td>
    <td>36</td>
    <td>1.99</td>
    <td></td>
  </tr>
  <tr>
    <td>First Direct</td>
    <td>75</td>
    <td>3.99</td>
    <td>999</td>
    <td>750000</td>
    <td>Fixed</td>
    <td>24</td>
    <td>1.19</td>
    <td></td>
  </tr>
</table>

非常感谢任何指针，谢谢

Answer 1

我们只需遍历表格行并获取每行的单元格列表。

使用querySelectorAll，我们可以快速访问元素，使用css选择器定位它们。
使用textContent，我们可以访问单元格的文本值。
使用parseFloat()，我们可以解析初始费率。

我还会为表格分配一个ID，以确保它选择正确的ID，格式为：

var rows = querySelectorAll('table#myTableId tr')

示例代码，位于repayment()：

的末尾

// get the rows
var rows = document.querySelectorAll('table tr');
for(var row of rows) {

    // get the cells
    var cells = row.querySelectorAll('td');

    // skip headers, essentially
    if(cells.length == 0) {
        continue;
    }

    /*  cells[x]:
        [0] Mortgage Lender
        [1] Max LTV
        [2] SVR
        [3] Fee
        [4] Max Amount
        [5] Type
        [6] Length (months)
        [7] Initial Rate
        [8] Monthly Repayment
    */

    // get initial rate
    var iniRate = parseFloat(cells[7].textContent);

    /*
        calculate row stuff here
    */

    // update "Monthly Repayment" cell
    cells[8].textContent = 'new value';
}

在.js计算中使用html表数据并更新单元格作为结果

1 个答案: