Hi!

i'm working inside a table for Labour times. Each row has a start and end (essentially just a 4 digit number to give 24hr time)

Each Row has a total which gives me the hours spent.

(It's limited to 1/2 hr blocks via regex on the input fields. This gives hours spent in a decimal, not times. That's what the customer wanted, to match up with another system)

There is then an overall total that adds up all rows.

Can the inbuilt calculations be used in tables with dynamic number of rows? How do i then reference the values in rows that may or may not exist?

Thanks

$(document).ready(function () {
  
  $('.cf-table-block').on('blur', 'input', sumtotal);
  $(document).on('click', '.form-del-field', sumtotal);
  
  function sumtotal() {
    var hour = 0;
    var rate = 0;
    var total = 0;
    var subtotal = 0;   
    $('.cf-table-block tbody tr').each(function () {
      hour = moment($(this).find('.Labour_END input').val(), 'HHmm');
      rate = moment($(this).find('.Labour_START input').val(), 'HHmm');
      subtotal = hour.diff(rate, 'Hours', true);
      $(this).find('.total input').val(subtotal.toFixed(2));
      total += subtotal;
    });  
    $('.Grandtotal input').val(total.toFixed(2));       
  }
  
    function parseNumber(n) { 
    var f = parseFloat(n); //Convert to float number. 
  	return isNaN(f) ? 0 : f; //treat invalid input as 0; 
  } 
});

You need to use JavaScript to sum table values. Your function triggers on the 'blur' event. This means that your function fires off when you are on an table input then lose focus on it by clicking outside the input.  It sounds like you are experiencing this issue on your last row. You should notice when you submit the form the values should update. If you want to mitigate this undesired behavior, you could add in a button under the table,  that would prompt the user to click to update the table values.