<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to sum values from table column and update when remove or add new row in jQuery </title>
<style type="text/css">
#TableHead td {
border-bottom: 1px #000 solid;
}
.orderTotalCell,
#grandTotalCell,
#totalPriceCell {
text-align: right;
}
#TableFooter tr:first-child td {
border-top: 1px #000 solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $tableBody = $('#TableBody');
var $totalQuantityCell = $('#totalQuantityCell');
var $totalPriceCell = $('#totalPriceCell');
var $totalGrandCell = $('#grandTotalCell');
/* Add a row with random values on "Add Row" button click */
$('#xd').click(addRandomRow);
function addRandomRow(event) {
var randomCode = Math.round(Math.random() * 4);
var randomClient = Math.round(Math.random() * 15);
var randomCharge = (Math.round(Math.random()) ? 'Debit' : 'Credit');
var randomQuantity = Math.ceil(Math.random() * 5);
var randomPrice = Math.ceil(Math.random() * 100).toFixed(2);
addRow(randomCode, randomClient, randomCharge, randomQuantity, randomPrice);
};
/* Add some rows to start */
addRandomRow();
addRandomRow();
/* Listen for clicks on ".deleteRowButton" within the table */
$tableBody.on('click', '.deleteRowButton', function(event) {
deleteRow($(event.target).data('row'));
updateTotals();
});
function addRow(code, client, chargeType, quantity, price) {
/* Create a new row element */
var idNum = ($tableBody.find('tr').length + 1);
var rowId = 'row-' + idNum;
var $row = $('<tr id="' + rowId + '"></tr>');
/* Add the table cells $row.append('<td class="idCell">' + idNum + '</td>'); */
$row.append('<td class="codeCell">' + code + '</td>');
$row.append('<td class="clientCell">' + client + '</td>');
$row.append('<td class="chargeTypeCell">' + chargeType + '</td>');
$row.append('<td class="quantityCell">' + quantity + '</td>');
$row.append('<td class="priceCell">' + price + '</td>');
$row.append('<td class="orderTotalCell">' + getSubtotal(quantity, price) + '</td>');
$row.append('<td><input type="button" value="Delete" class="deleteRowButton" data-row="#' + rowId + '" /></td>');
/* Append the row to the table body */
$tableBody.append($row);
updateTotals();
}
function deleteRow(rowId) {
$(rowId).remove();
}
function updateTotals() {
var totalQuantity = getColumnTotal('.quantityCell');
var totalPrice = getColumnTotal('.priceCell');
var totalOrder = getColumnTotal('.orderTotalCell');
$totalQuantityCell.text(totalQuantity);
$totalPriceCell.text(toMoney(totalPrice));
$totalGrandCell.text(toMoney(totalOrder));
}
function getSubtotal(quantity, price) {
return (quantity * price).toFixed(2);
}
function getColumnTotal(selector) {
return Array.from($(selector)).reduce(sumReducer, 0);
}
function sumReducer(total, cell) {
return total += parseInt(cell.innerHTML, 10);
}
function toMoney(number) {
return '$' + number.toFixed(2);
}
</script>
</head>
<body>
<table id="Table">
<thead id="TableHead">
<tr>
<td>ID</td>
<td>Code</td>
<td>Client</td>
<td>Debit/Credit</td>
<td>Quantity</td>
<td>Price</td>
<td>Order Total</td>
<td>Options</td>
</tr>
</thead>
<tbody id="TableBody">
</tbody>
<tfoot id="TableFooter">
<tr>
<td colspan="4">Sub-Total</td>
<td id="totalQuantityCell">–</td>
<td id="totalPriceCell">–</td>
<td id="grandTotalCell">–</td>
</tr>
</tfoot>
</table>
<input type="button" id="xd" value="add row">
</body>
</html>