Jquery Math Operations For My Datagrid

I have the following data grid: I would like to have in jQuery a method to count the number of rows (created by the user) then make the multiplication for each row (nr Km * Price

Solution 1:

I did update for you,, see if that's ok for your needs,

cheers

update: Hugo, you are very demanding.. I almost developed full web app here and you didn't even buy me a beer man :)

var frmt = {format: 'DD/MM/YYYY', viewMode: 'days'};
$('.dateP').datetimepicker( frmt );
// duplicate the row
$('.dupli').on( 'click', function(e){
  if( $('.cpy').last().find('input').first().val() != ''
    && $('.cpy').last().find('input').last().val() != '' ){    
      var dup = $('.cpy').first().clone();
      $('.table').append( dup );
      $('.dateP').datetimepicker( frmt );
      calc(); // on creation of new row do the calc
  }
});
// remove the row
$(document).on( 'click', '.remove', function(el){ 
  if( $('.cpy').length > 1 ){
    $(this).parent().parent().remove(); calc();
  }
});
// function for calcfunctioncalc(){
  var kp = $('.price').val(); // pricevar sum = 0;
  $('.km').each( function(ix){
    sum += $(this).val() * kp;
  });
  $('.fin').val( sum );
}
// on input update the total
$(document).on( 'change input', '.km', calc );
$('.price').on( 'change input', calc );

.remove{
  cursor:pointer;
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css"rel="stylesheet"/><divclass="form-inline col-md-6"><divclass="form-group">
  Price per Km: <inputtype='number'class="form-control price"value="0.36"step="0.01"min="0.2"max="5" /></div></div><tableclass="table table-striped"><tr><th>Km Nr:</th><th>Date:</th><td><buttontype="submit"class="btn btn-default dupli">+</button></td></tr><trclass="cpy"><td><inputtype="number"class="form-control km" ></td><td><divclass='input-group dateP'><inputtype='text'class="form-control" /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></td><td><iclass="fa fa-trash remove"aria-hidden="true"></i></td></tr></table><pclass="form-inline">Total expenses: <inputtype='number'class="form-control fin" /></p>

Solution 2:

have a look at this fiddle i made for you: https://jsfiddle.net/kks3bL06/

i have added a class to the kilometer input. go with foreach over all the kilometer fields, add the sum and write it into the span.

$('.dateP').datetimepicker();

$('.dupli').on( 'click', function(e){
  var dup = $('.cpy').first().clone();
  $('.table').append( dup );
  $('.dateP').datetimepicker();
});


$('.kilometer').change(function() {
var total = 0;
	$('.kilometer').each(function(index,obj){
          total += $(obj).val() * 0.36;
	});
	$('.total').html(total);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" /><p>Price per Km: 0,36</p><tableclass="table table-striped"><tr><th>Km Nr:</th><th>Date:</th><td><buttontype="submit"class="btn btn-default dupli">+</button></td></tr><trclass="cpy"><td><inputtype="text"class="form-control kilometer"id="e1"></td><td><divclass='input-group dateP'><inputtype='text'class="form-control" /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></td></tr></table><div>
Total expeses: 
<spanclass="total"></span></div>