Javascript Ajax jQuery Html PHP Example Quiz New MORE

How to sum values from table column and update when remove or add new row in jQuery

<!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>

Run it yourself

Demo

ID Code Client Debit/Credit Quantity Price Order Total Options
Sub-Total

Download Source Code