基于JavaScript计算输出过滤表行

Filter table rows based on JavaScript calculation output

本文关键字：过滤 输出 JavaScript 计算 基于      更新时间：2023-09-26

我需要根据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>

在document ready函数中添加以下代码:

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

我们在这里所做的是创建一个函数来过滤值。我们在页面加载(文档就绪)和文本框值更改时调用相同的函数。

注意:计算可能出错。同样，我也可能写错了符号(小于/大于)

还要参考这个jsFiddle—这里使用keyup函数而不是change函数来使其更具动态性

我不确定我理解你所有的代码，但一般来说，它可以这样做:

//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);
});

免责声明:我没有测试过这段代码

相关文章：