JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td>2</td>
<td>2.45</td>
<td></td>
</tr>
<tr class="sum">
<td>3</td>
<td>24.5</td>
<td></td>
</tr>
<tr class="sum">
<td>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;
}

JavaScript

$(function()
{

    var $overall = 0;

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

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

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

        var sum = parseFloat($price.text()) * parseFloat($qnt.text());

        $(this).find("td").eq(2).text(sum);
        
        $overall+= sum;

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

});