Update total on deleting the row in table

Update total on deleting the row in table - javascript

I have a html table where total amount is not getting updated on entering new values and also not getting updated. It only shows NaN.
here is the javascript code:
function totamt(){
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for(var i=0;i<table.rows.length;i++){
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
$('body').delegate('.remove','click',function(){
$(this).parent().parent().remove();
totalamt();
});
Interactive Snippet
$(function() {
$('#add').click(function() {
addnewrow();
});
$('body').delegate('.remove', 'click', function() {
$(this).parent().parent().remove();
totalamt();
$('.details').delegate('.qty,.price', 'keyup', function() {
var tr = $(this).parent().parent();
var q = tr.find('.qty').val();
var p = tr.find('.price').val();
var a = (q * p);
tr.find('.amt').val(a);
totamt();
});
function totamt() {
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for (var i = 0; i < table.rows.length; i++) {
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
function addnewrow() {
var n = ($('.details tr').length - 0) + 1;
var tr = '<tr>' +
'<td class="no">' + n + '</td>' +
'<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><textarea name="size" id="size" class="form-control size" autocomplete="off"></textarea></td>' +
'<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off"/></td>' +
'<td><input type="text" name="unit" id="unit" class="form-control unit" autocomplete="off"/></td>' +
'<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off"/></td>' +
'<td><input type="text" name="tax" id="tax" class="form-control tax" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><input type="text" name="dis" id="dis" class="form-control dis" autocomplete="off" /></td>' +
'<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>' +
'<td><button class="btn btn-danger remove">X</button></td>' +
'</tr>';
$('.details').append(tr);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" id="stock">
<thead>
<tr>
<td>Sr no.</td>
<td>Product Name</td>
<td>Qty</td>
<td>Rate</td>
<td>Total</td>
<td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
</tr>
</thead>
<tbody class="details">
<tr>
<td class="no">1</td>
<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>
<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off" /></td>
<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off" /></td>
<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>
<td><button class="btn btn-danger remove">X</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="text-align:right;">Total</th>
<th colspan="2" id="total" class="total"><b>$</b></th>
</tr>
</tfoot>
</table>

Related

dynamically add value summation in row and colum

using this code i can already calculate two value in row now I am trying to sum column values below local column field all column value with this,
<table class="table order-list turf" id="turf">
<tr>
<td>Items</td>
<td>Local</td>
<td>Foreign</td>
<td>Total</td>
</tr>
<tr>
<td class="col-sm-3"><input type="text" name="" value="item1"></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="calculated_value"/></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
<input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" />
</td>
</tr>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_total"><input type="text" readonly="" name=""></td>
<td id="foreign_total"><input type="text" readonly="" name=""></td>
<td id="total_total"><input type="text" readonly="" name=""></td>
</tr>
</table>
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
Demo

I hope this is what you need. Code could be refactored but I think you can do it yourself.
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
calculate(this);
});
function calculate(elm) {
var parent_row = $(elm).closest('tr');
var elTotalIncome = $("#local_milion_grand_total").find("input");
var elTotalForeign = $("#foreign_milion_grand_total").find("input");
var elTotal = $('#total_milion_grand_total').find("input");
var totalincome = 0;
var totalLocal = 0;
var totalForeign = 0;
var total = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find('.total').val(totalincome);
for (i = 0; i < $("tbody tr").length; i++) {
let elCol = $($("tbody tr")[i]).find("td input");
let tmp = parseInt(elCol[1].value);
let tmp2 = parseInt(elCol[2].value);
let tmp3 = parseInt(elCol[3].value);
if (isNaN(tmp)) tmp = 0;
if (isNaN(tmp2)) tmp2 = 0;
if (isNaN(tmp3)) tmp3 = 0;
totalLocal += tmp;
totalForeign += tmp2;
total += tmp3;
}
elTotal.val(total);
elTotalIncome.val(totalLocal);
elTotalForeign.val(totalForeign);
}
//add new row button
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" value="Item ' + counter + '"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
if (counter == 1) return;
$(this).closest("tr").remove();
counter -= 1
calculate(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table order-list turf" id="turf">
<thead>
<tr>
<td>Items</td>
<td>Local(Milion Taka/Milion US$)</td>
<td>Foreign(Milion Taka/Milion US$)</td>
<td>Total(Milion Taka/Milion US$)</td>
<td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<input type="text" name="" value="item1">
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>
</tr>
</tbody>
<tfoot>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td>
<td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
<td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
</tr>
</tfoot>
</table>

Table total auto-calculated when the newly expanded row is removed using Jquery

So my snippet gives me this error: this.closest is not a function but everything works fine in my page, so let's forget this part.
My question is I have a table where the column and rows can be auto-calculated when user input some values, referring this https://stackoverflow.com/a/52642412/8826120 comment. And now I am making add more button and all the functions are working fine(adding the new input values), but when I removed the new rows, it cannot auto-calculated the total values.
How can I make my total line auto-update when the newly expanded row is removed?
You can check it from below, but as I said before only on this page I've got error:this.closest is not a function. Thanks in advance
Note: I make the function like this Remove table rows updating total data using jQuery
$(document).on('input change', '.outstanding, .received, .paid', updateTable);
function updateTable() {
updateRow($(this).closest("tr"));
updateCol($(this).closest("td"), $(this));
updateTotal($(this.closest("table")));
}
function updateRow($row) {
var sum = 0,
sum2 = 0,
sum3 = 0;
$row.find('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
out = $(this).val();
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
reci = $(this).val();
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
paid = $(this).val()
sum3 += parseFloat(this.value);
}
}
});
$row.find('.amtOutstanding').val(sum + sum2 + sum3);
}
function updateCol($col, $input) {
var index = $col.index() + 1;
var sum = 0;
$col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
sum += parseFloat(this.value);
}
});
if ($input.hasClass('outstanding')) {
$('#sch26_outstanding').val(sum.toFixed(2));
} else if ($input.hasClass('received')) {
$('#sch26_received').val(sum.toFixed(2));
} else if ($input.hasClass('paid')) {
$('#sch26_paid').val(sum.toFixed(2));
} else if ($input.hasClass('amtOutstanding')) {
$('#sch26_amtOutstanding').val(sum.toFixed(2));
}
}
function updateSchedule26() {
var sum = 0,
sum2 = 0,
sum3 = 0,
out, reci, paid;
$('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
sum3 += parseFloat(this.value);
}
}
});
var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
$(".amtOutstanding").val(parseFloat(total).toFixed(2));
$('#sch26_outstanding').val(sum.toFixed(2));
$('#sch26_received').val(sum2.toFixed(2));
$('#sch26_paid').val(sum3.toFixed(2));
}
function updateTotal($table) {
var sum = 0;
$table.find('.amtOutstanding').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$('#sch26_amtOutstanding').val(sum.toFixed(2))
}
function addMoreDepIT() {
var new_raw = $(
'<tr>'+
'<td><a href="javascript:void(0);" class="remove">Remove</td>'+
'<td><input type="number" min="0" name="" id="" class="form-control outstanding"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control received"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control paid"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control amtOutstanding" readonly></td>'+
'</tr>'
);
new_raw.insertBefore('#addMore');
$("#dep_it_table").on('click', '.remove', function() {
$(this).closest('tr').remove();
updateTable();
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table table-sm" id="dep_it_table">
<thead>
<tr>
<th style="width:16.67%">Name</th>
<th style="width:16.67%">Outstanding</th>
<th style="width:16.67%">Received</th>
<th style="width:16.67%">Paid</th>
<th style="width:16.67%">Sub Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Name 2</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr id="addMore">
<td><i class="ft-plus hidden-lg-up"></i> Add More</td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>Add Total</td>
<td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
</tr>
</tbody>
</table>

First you need to set all input of removed row to 0 and then recalculate every col and row total then you remove the row:
$("#dep_it_table").on('click', '.remove', function() {
var row = $(this).closest('tr');
row.find(".outstanding, .received, .paid").each(function(){
$(this).val(0)
$(this).change();
});
row.remove();
});
$(document).on('input change', '.outstanding, .received, .paid', updateTable);
function updateTable() {
updateRow($(this).closest("tr"));
updateCol($(this).closest("td"), $(this));
updateTotal($(this.closest("table")));
}
function updateRow($row) {
var sum = 0,
sum2 = 0,
sum3 = 0;
$row.find('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
out = $(this).val();
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
reci = $(this).val();
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
paid = $(this).val()
sum3 += parseFloat(this.value);
}
}
});
$row.find('.amtOutstanding').val(sum + sum2 + sum3);
}
function updateCol($col, $input) {
var index = $col.index() + 1;
var sum = 0;
$col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
sum += parseFloat(this.value);
}
});
if ($input.hasClass('outstanding')) {
$('#sch26_outstanding').val(sum.toFixed(2));
} else if ($input.hasClass('received')) {
$('#sch26_received').val(sum.toFixed(2));
} else if ($input.hasClass('paid')) {
$('#sch26_paid').val(sum.toFixed(2));
} else if ($input.hasClass('amtOutstanding')) {
$('#sch26_amtOutstanding').val(sum.toFixed(2));
}
}
function updateSchedule26() {
var sum = 0,
sum2 = 0,
sum3 = 0,
out, reci, paid;
$('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
sum3 += parseFloat(this.value);
}
}
});
var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
$(".amtOutstanding").val(parseFloat(total).toFixed(2));
$('#sch26_outstanding').val(sum.toFixed(2));
$('#sch26_received').val(sum2.toFixed(2));
$('#sch26_paid').val(sum3.toFixed(2));
}
function updateTotal($table) {
var sum = 0;
$table.find('.amtOutstanding').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$('#sch26_amtOutstanding').val(sum.toFixed(2))
}
function addMoreDepIT() {
var new_raw = $(
'<tr>'+
'<td><a href="javascript:void(0);" class="remove">Remove</td>'+
'<td><input type="number" min="0" name="" id="" class="form-control outstanding"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control received"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control paid"></td>'+
'<td><input type="number" min="0" name="" id="" class="form-control amtOutstanding" readonly></td>'+
'</tr>'
);
new_raw.insertBefore('#addMore');
$("#dep_it_table").on('click', '.remove', function() {
var row = $(this).closest('tr');
row.find(".outstanding, .received, .paid").each(function(){
$(this).val(0)
$(this).change();
});
row.remove();
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table table-sm" id="dep_it_table">
<thead>
<tr>
<th style="width:16.67%">Name</th>
<th style="width:16.67%">Outstanding</th>
<th style="width:16.67%">Received</th>
<th style="width:16.67%">Paid</th>
<th style="width:16.67%">Sub Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Name 2</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr id="addMore">
<td><i class="ft-plus hidden-lg-up"></i> Add More</td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>Add Total</td>
<td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
</tr>
</tbody>
</table>

Sum column in dynamic table

I have a dynamic table which calculates the a total column at the end of each row depending on input values but I cannot seem to get the total of this row?
I create my table with:
function calc() {
var td = document.querySelectorAll('#item_table > tr > td:last-child');
var stotal = [].reduce.call(td, function(a, b) {
return a + parseInt(b.innerText);
}, 0);
document.getElementById('sub_total').innerText = stotal;
}
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><input type="number" min="0" value="0" name="item_name[]" oninput="calc();calcSub()" class="form-control item_name" size="16" /></td>';
html += '<td><input type="number" min="0" value="0" name="item_quantity[]" oninput="calc()" class="form-control item_quantity" /></td>';
html += '<td><input type="number" min="0" value="0" name="item_unit[]" oninput="calc()" class="form-control item_unit" /></td>';
//NEW ONES!!!!!!!!!!!!!!!
html += '<td><select name="item_glass[]" oninput="calc()" class="form-control item_glass"><option>Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><select name="item_splash[]" oninput="calc()" class="form-control item_splash"><option value="0">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';
html += '<td><input type="text" value="-" name="item_colour[]" oninput="calc()" class="form-control item_colour" /></td>';
html += '<td><input type="number" min="0" value="0" oninput="calc()" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
html += '<td><select name="item_HDiam[]" oninput="calc()" class="form-control item_HDiam"><option value="0">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
html += '<td><input type="number" min="0" value="0" oninput="calc()" name="item_CQuan[]" class="form-control item_CQuan" /></td>';
//Total
html += '<td><input type="text" value="0.0" name="item_Total[]" id="item_Total[]" class="form-control item_Total" disabled/></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Item<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="item_table">
<tr id="titles">
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Glass Type</th>
<th>Sparkle or Glaze</th>
<th>Colour Code</th>
<th>Hole Quantity</th>
<th>Hole Diameter</th>
<th>Cut-out Quantity</th>
<th>Item cost £ (excl. Vat)</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span>Add Item</button></th>
</tr>
</table>
<div class="form-group">
<label for="job_ref">Sub Total</label>
<input type="text" id="sub_total" class="form-control sub_total" name="sub_total" placeholder="0" value="0" readonly/>
</div>
Another thing tried but always equal to 0 regardless of the input:
function calcSub(){
var cls = document.getElementById("item_Total[]").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
if(cls[i].className == "countable"){
sum += isNaN(cls[i].value) ? 0 : parseInt(cls[i].value);
}
}
document.getElementById('sub_total').value = sum;
};
Is their anyway to do this I cant figure it out?

function calcSub(){
var totalPrice = 0;
$(".item_Total").each(function(){
totalPrice += parseInt($(this).val());
$(".sub_total").val(totalPrice);
});
Answer driven from post: How to sum values from table column and update when remove/add new row

Try something like this code
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><input type="number" min="0" value="0" name="item_name[]" class="form-control item_name" size="16" /></td>';
html += '<td><input type="number" min="0" value="0" name="item_quantity[]" class="form-control item_quantity" /></td>';
html += '<td><input type="number" min="0" value="0" name="item_unit[]" class="form-control item_unit" /></td>';
//NEW ONES!!!!!!!!!!!!!!!
html += '<td><select name="item_glass[]" class="form-control item_glass"><option>Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><select name="item_splash[]" class="form-control item_splash"><option value="0">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';
html += '<td><input type="text" value="-" name="item_colour[]" class="form-control item_colour" /></td>';
html += '<td><input type="number" min="0" value="0" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
html += '<td><select name="item_HDiam[]" class="form-control item_HDiam"><option value="0">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
html += '<td><input type="number" min="0" value="0" name="item_CQuan[]" class="form-control item_CQuan" /></td>';
//Total
html += '<td><input type="text" value="0.0" name="item_Total[]" id="item_Total[]" class="form-control item_Total" disabled/></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Item<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('change', 'input', function() {
$("table tr").each(function(ind, el) {
var sum = 0; $(this).find("input:not(:last)").each(function(indx, ele) {
sum += $(ele).val();
});
$(this).find("input").last().val(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="item_table">
<tr id="titles">
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Glass Type</th>
<th>Sparkle or Glaze</th>
<th>Colour Code</th>
<th>Hole Quantity</th>
<th>Hole Diameter</th>
<th>Cut-out Quantity</th>
<th>Item cost £ (excl. Vat)</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span>Add Item</button></th>
</tr>
</table>
<div class="form-group">
<label for="job_ref">Sub Total</label>
<input type="text" id="sub_total" class="form-control sub_total" name="sub_total" placeholder="0" value="0" readonly/>
</div>
But consider these:
1-create a class for columns you want to be calculated and modify its jquery selector.
2-ensure the input values always are numeric, then convert them into Number.
3-for the Sub Total insert special jquery code you want. (I did not add that, because I don't know how exactly calculate its value)

How to generate table tr based on a total number

i wrote the blow code to generate tr for my table based on a total count .
there is a input type text that contains a number and i want to generatge tr for my table according to that number
but it is not working .
here is my snippet :
function findTotal(){
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>

$( document ).ready(function() {
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="hidden" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>

When constructing these kind of strings, the new template literals from ES6 are a good fit. See here for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function findTotal(){
var body = document.getElementsByTagName("tbody")[0];
var rowNum = parseInt(document.getElementById("total").value, 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += `<tr>
<td>
${(i + 1)}
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
</tr>`;
};
body.innerHTML = resultHtml;
};
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>

$("#RowC").on("click",function(){
var TRCnt=$("tbody >tr").length;
for(var i=TRCnt;i< (parseInt($("#RowNum").val())+TRCnt);i++){
let tr=$("<tr/>");
let inputName=$("<input/>",{type:"text",name:"name",placeholder:"name",value:i+1});
let inputGender=$("<input/>",{type:"text",name:"gender",placeholder:"gender"});
let inputCountry=$("<input/>",{type:"text",name:"country",placeholder:"country"});
tr.append($("<td/>").html(inputName));
tr.append($("<td/>").html(inputGender));
tr.append($("<td/>").html(inputCountry));
$("tbody").append(tr);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="RowNum" />
<input type="button" id="RowC" value="click" />
<hr>
<table>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

This is the jquery code:
$("#submitButton").click(function() {
var table = $("#resultTable");
var rowNum = parseInt($("#table-row-num").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
I wish you luck with implementation. :)
The Demo here: http://jsfiddle.net/fpd8dwtw/20/

Row count in dynamically generated table using JQuery

I've a table with header and footer and a default row already created. When I add more rows dynamically I don't get the exact row count. It always returns the correct row count if I add them before.
Below is the code I've written -
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button></th>
</tr>
</tfoot>
</table>
<script>
//function to add/remove rows
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}
</script>
And I'm using this line to return row count but it's not working -
var rowCount = document.getElementById("TextBoxContainer").rows.length;
$('#btnSave').on('click', function() {
alert(rowCount);
})
I've tried all the solutions from stackoverflow but not getting why it's not working for dynamic rows whereas same code I saw in a fiddle working.
Please help.

Because you create new rows on the fly you need to move this line:
var rowCount = document.getElementById("TextBoxContainer").rows.length;
inside:
$('#btnSave').on('click', function() {
And as per #charlietf comment I would suggest to change the row count in:
var rowCount = $("#TextBoxContainer tr").length;
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
}
$(function () {
$('#btnSave').on('click', function() {
var rowCount = $("#TextBoxContainer tr").length;
console.log('Rows: ' + rowCount);
})
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button>
<button id="btnSave" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="ASavee controls"><i class="glyphicon glyphicon-plus-sign"></i> Save </button></th>
</tr>
</tfoot>
</table>

Develop Reference

JavaScript is the programming language of the Web.

Update total on deleting the row in table - javascript

Related

dynamically add value summation in row and colum

Table total auto-calculated when the newly expanded row is removed using Jquery

Sum column in dynamic table

How to generate table tr based on a total number

Row count in dynamically generated table using JQuery

Categories

Resources