title: Populate rows on a table based on a value from table footer
body: <p>I have the following table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;table id="ccTransactions" class="table table-bordered"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;Timestamp&lt;/td&gt;
           &lt;td&gt;Transaction&lt;/td&gt;
           &lt;td&gt;In&lt;/td&gt;
           &lt;td&gt;Out&lt;/td&gt;
           &lt;td&gt;Balance&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;06/02/2018&lt;/td&gt;
           &lt;td&gt;Card Sale&lt;/td&gt;
           &lt;td&gt;+£16.98&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;06/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;06/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;Card Sale&lt;/td&gt;
           &lt;td&gt;+£14.10&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;05/02/2018&lt;/td&gt;
           &lt;td&gt;cash fee&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;-£0.50&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
     &lt;tfoot&gt;
        &lt;tr&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;&lt;/td&gt;
           &lt;td&gt;Total: &lt;/td&gt;
           &lt;td&gt;Total: &lt;/td&gt;
           &lt;td&gt;Final: £1334.05&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tfoot&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The table is being create when I supply a start and end date. It can only get the final balance for the end date selected. My question is, is there a way to populate the <code>balance</code> rows based on the final <code>balance</code> value that I have? Also, how can I add up the total amount from the <code>in</code> and <code>out</code> columns and display them in the table footer?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I've used this code to add up the <code>out</code> values. It worked on a different table where there where no empty rows, but doesn't work on this one.</p>
  
  <pre><code>  var currencySymbol = '-£'
    var total = 0.0;
    $('table tbody tr:gt(0) td:nth-child(4)').each(function() {
      total += parseFloat($(this).html().replace(currencySymbol, ''));
    });
    var $newTR = $("&lt;tr&gt;&lt;td colSpan='3'&gt;&lt;/td&gt;&lt;td&gt;Total: £"+total.toFixed(2)+"&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;");
  </code></pre>