Why is this HTML table calculation not showing the total?

July 23, 2022

Just started diving into JS and Jquery and I can’t find out why this is not calculating the table’s qty by price when the function is called without any parameter passed.

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("$" + total);
  } else {


//THIS IS THE PIECE THAT DOESN'T SEEM TO RUN
    $("#tableRows tr").each(function() {
      $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val()));
    });
    console.log('Row Total: ' + $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val())))
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>
<script>
//add_to_total()
</script>

…and I could use a helping hand.

>Solution :

Since total_price is a table cell, you can’t use .val() to change it’s value. Use .html() or .text(). Val is used for inputs.

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("$" + total);
  } else {

    $("#tableRows tr").each(function() {
      $(this).find('.total_price').text(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val()));
    });
    console.log('Row Total: ' + $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val())))
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

add_to_total();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>