jQuery - cloned element and calculate value by Norlihazmey Ghazali
jQuery - cloned element and calculate value by Norlihazmey Ghazali
http://stackoverflow.com/questions/32450116/add-remove-row-with-serial-number-incriment-with-add-and-remove/32450609#32450609
HTML
<div id="mainDiv">
<div class="one">
<div class="row">
<div class="input-field col s1">
<input class="sno" type="text" name="Sr" value="1">
<label for="Sr">Sr</label>
</div>
<div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>
</div>
<div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>
</div>
</div>
</div>
</div>
<div class="input-field col s2">
<input type="text" name="Grand" id="Grand">
<label for="net_rate">Grand Total</label>
</div>
<h5>I Want To This Paramenter </h5>
<h5>1. SrNo Auto Incriment Or delete To decrimrnt.<br>2.Quantity * Net rate = Total.<br>3. All Total = Grand Total </h5>
JavaScript
$(document).ready(function () {
$(".add").click(function () {
var length = $('.one').length;
var cloned = $(this).closest('.one').clone(true);
cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
cloned.find(':input:not(".sno")').val(" ");
var parent = $(this).closest('.one');
calculate(parent);
});
$('.delete').click(function () {
var parent = $(this).closest('.one');
$(this).parents(".one").remove();
calculate(parent);
});
});
$(document).on('keyup', '.quantity, .net_rate', function () {
var parent = $(this).closest('.one');
calculate(parent);
})
function calculate(e){
var q = +$(e).find('.quantity').val();
var n = +$(e).find('.net_rate').val();
var sum = 0;
$(e).find('.total').val(q*n);
$('.total').each(function(i,e){
sum += +$(e).val();
});
$('#Grand').val(sum);
};