javascript - 根据输入类型显示/隐藏 div 组= "number"

Question

我有以下表单和脚本，效果非常好。我正在尝试根据表单输入显示/隐藏表格上的行。

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>

我需要有一列表示“max ltv”，它将显示一个数字，例如 75。如果 var Loantovalue = x/h * 100; 的值大于 75，则该行已隐藏。

如何根据表单中输入的数字对 div 进行分组或隐藏表格行？

请提供任何入门帮助。

表格示例:

<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>
  </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>
  </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>
  </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>
  </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>
  </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>
  </tr>
</table>

因此，如果“超过 750000”，则“first direct”行将不会显示。如果“超过 60”，则“约克郡建筑协会”行将不会显示。

除此之外，我想要一种具有额外列的方法，该列将根据表和表单输入中的“初始利率”值计算出每月还款额。

使用 html 表格是否可以做到这一点，或者是否需要 div 布局，我从哪里开始？谢谢!

Answer 1

你已经快到了，看起来你所需要的只是一个 if 语句来隐藏或显示。请参阅下面我编辑的片段。

注意，我还删除了内联样式并添加了标签，以使其更具语义性。

window.onload = function() {
  repayment(); // Call onload to setup with initial values
  
  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';

  /**
   *
   * Added this, below
   *
   **/
  var rows = document.getElementById("data").getElementsByTagName("tr");
  var len = rows.length;
  
  // Iterate through each of the rows
  for(var i = 0; i < len; i++) {
    var cell = rows[i].getElementsByTagName("td")[1]; // Get the second td in this row
    var maxltv = parseInt(cell.innerHTML, 10);
    var rowClass = rows[i].className;
    
    // If the ltv on this row is lower than it's max, and it doesn't have a class="hide" yet, add it
    if(maxltv < loantovalue && rowClass.indexOf('hide') < 0) {
      // Take into accound multiple classes (add a space if necessary)
      rows[i].className = (rowClass.length > 0 ? ' ' : '') + 'hide';
    }
    // If the ltv on this row is higher than, or equal to its max, remove the class="hide"
    else if(maxltv >= loantovalue) {
      rows[i].className = rowClass.replace('hide', '').trim();
    }
  }
}

body {
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
}
tr.hide {
  display: none;
}
td, th {
  border: 1px solid #000;
  text-align: left;
  padding: 5px;
}
#homevalue {
  width: 25px;
}
#loanamount {
  width: 75px;
}
#interestrate {
  width: 50px;
}
#numberpayments {
  width: 100px;
}
#years {
  display: inline-block;
}

<form name="repaymentcalc" action="">
  <p>
    <label for="homevalue">Home Value £</label>
    <input type="number" id="homevalue" value="250000" />
  </p>

  <p>
    <label for="loanamount">Loan Amount £</label>
    <input type="number" id="loanamount" value="200000" />
  </p>

  <p>
    <label for="interestrate">Interest Rate</label>
    <input type="number" id="interestrate" value="3.00" />%
  </p>

  <p>
    <label for="numberpayments">Term</label>
    <input type="range" id="numberpayments" value="25" min="1" max="40" />
    <span id="years">25 years</span>
  </p>

  <p id="repayments">Monthly Repayment: £948.42</p>
  <p id="ltv">Loan to Value: 80.0%</p>
</form>

<table>
  <thead>
    <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>
    </tr>
  </thead>
  <tbody id="data">
    <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>
    </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>
    </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>
    </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>
    </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>
    </tr>
  </tbody>
</table>