title: Filter table rows based on JavaScript calculation output
body: <p>I need to filter rows in the following table based on the output of a JavaScript calculation.</p>
  
  <p>I need the output of:</p>
  
  <pre><code>var loantovalue = x / h * 100;
  </code></pre>
  
  <p>to filter rows if the value of <code>loantovalue</code> is more than the value of <code>&lt;td class="ltv"&gt;</code>.</p>
  
  <p>I am not really sure how to go about doing this? Any help would be appreciated please.</p>
  
  <p>I filter the data elsewhere using checkboxes, and use this:</p>
  
  <pre><code>$(document).ready(function() {
  $("#type :checkbox").click(function() {
  $("td").parent().hide();
  $("#type :checkbox:checked").each(function() {
    $("." + $(this).val()).parent().show();
  });`
  </code></pre>
  
  <p>So I guess I need to do something similar to the output of <code>loantovalue</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form name="repaymentcalc" id="myForm" action=""&gt;
  
      &lt;h3&gt;Mortgage Needs&lt;/h3&gt;
  
      &lt;p&gt;Home Value £&lt;input type="number" id="homevalue" value="250000" style="width: 75px"&gt;&lt;/p&gt;
  
      &lt;p&gt;Loan Amount £&lt;input type="number" id="loanamount" value="200000" style="width: 75px"&gt;&lt;/p&gt;
  
      &lt;p id="ltv"&gt;Loan to Value: 80.0%&lt;/p&gt;
  
  &lt;section id="type"&gt;
  
    &lt;p id="Mortgage Type"&gt;Mortgage Type&lt;/p&gt;
    &lt;input type="checkbox" name="type" value="t2" id="t2" checked/&gt;2yr Fixed&lt;br&gt;
    &lt;input type="checkbox" name="type" value="t3" id="t3" checked/&gt;3yr Fixed&lt;br&gt;
    &lt;input type="checkbox" name="type" value="t5" id="t5" checked/&gt;5yr Fixed&lt;br&gt;
  
  &lt;/section&gt;
  
  &lt;section id="fee"&gt;
  
    &lt;p id="Fee"&gt;Fee&lt;/p&gt;
    &lt;input type="checkbox" name="fee" value="fee" id="fee" checked/&gt;Fee&lt;br&gt;
    &lt;input type="checkbox" name="fee" value="nofee" id="nofee" checked/&gt;No Fee&lt;br&gt;
  
  &lt;/section&gt;
  
      Term &lt;input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 75px"&gt; &lt;p id="years" style="display:inline-block;"&gt; 25 years&lt;/p&gt;
  
  &lt;/form&gt;
  
  &lt;table id="mortgagetable"&gt;
      
  &lt;thead&gt;
  
  &lt;tr class="producthd"&gt;&lt;th class="lenderhd"&gt;Lender&lt;/th&gt;&lt;th class="typehd"&gt;Mortgage Type&lt;/th&gt;&lt;th class="initialratehd"&gt;Initial Rate (%)&lt;/th&gt;&lt;th class="rateshd"&gt;Reversion Rate (%)&lt;/th&gt;&lt;th class="rateshd"&gt;Overall APR (%)&lt;/th&gt;&lt;th class="feehd"&gt;Product Fee (£)&lt;/th&gt;&lt;th class="ltvhd"&gt;Maximum LTV (%)&lt;/th&gt;&lt;th class="repaymenthd"&gt;Initial Repayment&lt;/th&gt;&lt;th class="applylinkhd"&gt;&lt;/th&gt;&lt;/tr&gt;
  
  &lt;/thead&gt;
  
  &lt;tbody&gt;
  
  &lt;tr class="product"&gt;&lt;td class="lender"&gt;&lt;/td&gt;&lt;td class="t2"&gt;2yr Fixed&lt;/td&gt;&lt;td class="initialrate"&gt;1.29&lt;/td&gt;&lt;td class="rates"&gt;4.74&lt;/td&gt;&lt;td class="rates"&gt;4.3&lt;/td&gt;&lt;td class="fee"&gt;999&lt;/td&gt;&lt;td class="ltv"&gt;60&lt;/td&gt;&lt;td class="repayment"&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="product"&gt;&lt;td class="lender"&gt;&lt;/td&gt;&lt;td class="t2"&gt;2yr Fixed&lt;/td&gt;&lt;td class="initialrate"&gt;1.39&lt;/td&gt;&lt;td class="rates"&gt;4.24&lt;/td&gt;&lt;td class="rates"&gt;3.9&lt;/td&gt;&lt;td class="fee"&gt;1495&lt;/td&gt;&lt;td class="ltv"&gt;60&lt;/td&gt;&lt;td class="repayment"&gt;&lt;/td&gt;&lt;td class="applylink"&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;/tbody&gt;
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>