Question

我需要根据JavaScript计算的输出过滤下表中的行。

我需要输出：

var loantovalue = x / h * 100;

如果loantovalue的值大于<td class="ltv">的值，则过滤行。

我不确定该如何做到这一点？任何帮助将不胜感激。

我使用复选框在其他地方过滤数据，并使用：

$(document).ready(function() {
$("#type :checkbox").click(function() {
$("td").parent().hide();
$("#type :checkbox:checked").each(function() {
  $("." + $(this).val()).parent().show();
});`

所以我想我需要做一些类似于loantovalue

的输出的事情

$(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();
    });
  });
});

var repayment = function() {

};
window.onload = function() {
  document.repaymentcalc.homevalue.onchange = repayment;
  document.repaymentcalc.loanamount.onchange = repayment;
  document.repaymentcalc.numberpayments.onchange = function() {
    $('#years').html(this.value + ' years');
  };
  makeSomething();
};

function makeSomething() {
  $('tbody tr').each(function(idx, row) {
    var $row = $(row);
    var initialRateCell = $row.find('td')[2];
    var repaymentCell = $row.find('td')[7];
    var rate = parseFloat($(initialRateCell).html());
    var repaymentVal = computeRepayment(rate);
    $(repaymentCell).html(repaymentVal.repayment);
  });
}
$("#myForm :input").change(function() {
  makeSomething();
});

function computeRepayment(rate) {
  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;

  $('#ltv').text('Loan to Value: ' + loantovalue.toFixed(2) + '%');

  var year = z / 12;
  return {
    repayment: '£' + repayment.toFixed(2),
    loantovalue: loantovalue,
    year: year
  }
}

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form name="repaymentcalc" id="myForm" action="">

    <h3>Mortgage Needs</h3>

    <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 id="ltv">Loan to Value: 80.0%</p>

<section id="type">

  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" checked/>2yr Fixed<br>
  <input type="checkbox" name="type" value="t3" id="t3" checked/>3yr Fixed<br>
  <input type="checkbox" name="type" value="t5" id="t5" checked/>5yr Fixed<br>

</section>

<section id="fee">

  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" id="fee" checked/>Fee<br>
  <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>No Fee<br>

</section>

    Term <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 75px"> <p id="years" style="display:inline-block;"> 25 years</p>

</form>

<table id="mortgagetable">
    
<thead>

<tr class="producthd"><th class="lenderhd">Lender</th><th class="typehd">Mortgage Type</th><th class="initialratehd">Initial Rate (%)</th><th class="rateshd">Reversion Rate (%)</th><th class="rateshd">Overall APR (%)</th><th class="feehd">Product Fee (£)</th><th class="ltvhd">Maximum LTV (%)</th><th class="repaymenthd">Initial Repayment</th><th class="applylinkhd"></th></tr>

</thead>

<tbody>

<tr class="product"><td class="lender"></td><td class="t2">2yr Fixed</td><td class="initialrate">1.29</td><td class="rates">4.74</td><td class="rates">4.3</td><td class="fee">999</td><td class="ltv">60</td><td class="repayment"></td></td></tr>
<tr class="product"><td class="lender"></td><td class="t2">2yr Fixed</td><td class="initialrate">1.39</td><td class="rates">4.24</td><td class="rates">3.9</td><td class="fee">1495</td><td class="ltv">60</td><td class="repayment"></td><td class="applylink"></td></tr>

</tbody>

</table>

Answer 1

在文档就绪功能中添加以下代码：

FilterByMaxLTV();
function FilterByMaxLTV() {

    $("#mortgagetable tbody tr").each(function () {

        var l = parseFloat($('#loanamount').val());
        var h = parseFloat($('#homevalue').val());
        var loneToValue = parseFloat((l/h)*100).toFixed(2);
        $('#ltv').text('Loan to Value: ' + loneToValue + '%');

        //Get the number from the right td.
        var x = parseFloat($(this).find(".ltv").text());
        console.log(x);
        if(x>loneToValue){
            $(this).hide();
        }
        else{
            $(this).show();
        }
    });
}

$('#homevalue,#loanamount').change(function(){
    FilterByMaxLTV();
});

JSFiddle

我们在这里做的是我们创建了一个过滤值的函数。我们在页面加载（文档就绪）和文本框值更改上调用相同的函数。

注意：计算可能是错误的。同样地，我可能会使用错误的符号（小于/大于）

同时参考this jsFiddle - 这里使用keyup函数代替change函数使其更具动态性

Answer 2

我不确定我是否了解您的所有代码，但一般情况下可以这样做：

//For every tr in the table.
$("#mortagetable tr").each(function() {
     //I assume that the variable loantovalue is defiend globally somewhere,
     //since I can not understand how it is supposed to be calculated from your question.
     //Get the number from the right td.
     var x = parseInt($(this).find(".ltv").text())
     //Toggel the visibility of this tr.
     $(this).toggle(loantovalue > x);
});

Disclaimar：我还没有测试过这段代码。

根据JavaScript计算输出过滤表行

2 个答案: