JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<table>
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Price</th>
            <th>Sum</th>
        </tr></thead>
    <tbody>
        <tr class="sum">
            <td><input class="qty" type="text" value="2" /></td>
            <td>375,5</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input class="qty" type="text" value="3" /></td>
            <td>24.5</td>
            <td></td>
        </tr>
        <tr class="sum">
             <td><input class="qty" type="text" value="4" /></td>
            <td>37</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2">Total</td>
            <td id="total"></td>
        </tr>
    </tbody>
</table>

CSS

th,td {
    border: 1px solid #000;
    padding: 5px;
}
td:last-child{
    text-align:right;
}

JavaScript

function ca(){
    var $overall = 0;

    $("tr.sum").each(function() {

        var $qnt = $(this).find(".qty");
        var $price = $(this).find("td").eq(1);

        console.log($qnt + " | " + $price);

        var sum = parseFloat($price.text().replace(',','.')) * parseFloat($qnt.val());

        if(isNaN(sum)) {
            sum = 0;
        }
        $(this).find("td").eq(2).text((Math.round(sum * 100) / 100).toFixed(2));

        $overall += sum;

    });

    $("#total").text($overall.toFixed(2));
}

$(function() {

    ca();
    $('input.qty').bind('change keyup',function(){ca();});

});