Question

I started off by using this solution, but I can’t seem to get it to work

jQuery calculate sum of values in all text fields

Here is an example of my html

<table>
  <tbody>
    <tr id="tr_affiliation_15159">
      <td class="right col_aff_amount">15.00</td>
    </tr>
    <tr id="tr_affiliation_15189">
      <td class="right col_aff_amount">15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="total"></td>
    </tr>
  </tfoot>
</table>

This is my javascript function

function removeRow(id) {
  $("#tr_affiliation_" + id).fadeOut("slow", function() {
    $("#tr_affiliation_" + id).remove();

    // recalc total
    var total = 0;

    $('.col_aff_amount').each(function() {
      // i have tried .text(), and .html() as well as .val() but it doesn't seem to make any difference
      var val = parseFloat($(this).val());
      console.log(val);
      total += val;
  });

  $("td.total").html(parseFloat(total).toFixed(2));

}

My console log just shows a long list of NaN, why can’t it extract the number?

Answer 1

you should use text() for elements other than form elements like input and textarea, also as you are doing calculation, define the variable val with an integer value before calculatiing:

$(document).ready(function(){
   // ...
   var val = 0;
   val = parseInt($(this).text(), 10);
  // ...
})

DEMO