JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <table>
<tr>
    <td>Months<br />
        Items</td>
    <td>Jan</td>
    <td>Feb</td>
    <td>Mar</td>
    <td>Apr</td>
    <td>May</td>
    <td>Jun</td>
    <td>Total</td>
</tr>
<tr>
    <td>Item - 1</td>
    <td><input type="text" id="txtJan1" value="0" /></td>
    <td><input type="text" id="txtFeb1" value="0" /></td>
    <td><input type="text" id="txtMar1" value="0" /></td>
    <td><input type="text" id="txtApr1" value="0" /></td>
    <td><input type="text" id="txtMay1" value="0" /></td>
    <td><input type="text" id="txtJun1" value="0" /></td>
    <td><input type="text" id="txtTotal1" class="total" value="0" /></td>
</tr>
<tr>
    <td>Item - 2</td>
    <td><input type="text" id="txtJan2" value="0" /></td>
    <td><input type="text" id="txtFeb2" value="0" /></td>
    <td><input type="text" id="txtMar2" value="0" /></td>
    <td><input type="text" id="txtApr2" value="0" /></td>
    <td><input type="text" id="txtMay2" value="0" /></td>
    <td><input type="text" id="txtJun2" value="0" /></td>
    <td><input type="text" id="txtTotal2" value="0" class="total" /></td>
</tr>
<tr>
    <td>Item - 3</td>
    <td><input type="text" id="txtJan3" value="0" /></td>
    <td><input type="text" id="txtFeb3" value="0" /></td>
    <td><input type="text" id="txtMar3" value="0" /></td>
    <td><input type="text" id="txtApr3" value="0" /></td>
    <td><input type="text" id="txtMay3" value="0" /></td>
    <td><input type="text" id="txtJun3" value="0" /></td>
    <td><input type="text" id="txtTotal3" value="0" class="total" /></td>
</tr>
<tr>
    <td>Item - 4</td>
    <td><input type="text" id="txtJan4" value="0" /></td>
    <td><input type="text" id="txtFeb4" value="0" /></td>
    <td><input type="text" id="txtMar4" value="0" /></td>
    <td><input type="text" id="txtApr4" value="0" /></td>
    <td><input type="text" id="txtMay4" value="0" /></td>
    <td><input type="text" id="txtJun4" value="0" /></td>
    <td><input...

CSS

table td
{
    padding:3px;
    text-align:center;
    font-family:arial;
    font-size:11px;
}
table td input
{
    width:50px;
}
.total
{background-color:red;
    color:white;
}
.itemtotal
{
    background-color:blue;
        color:white;
    font-weight:bold;
}
.grandtotal

{background-color:black;
    color:white;
}

JavaScript

$(document).ready(function() {
    $("[id*=txtJan]").each(function() {
        $(this).live("change", function () {
            calculateSum();
        });
    });
});

function calculateSum() {
    var sum = 0;
    $("[id*=txtJan]").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("[id*=txtItemJanTotal]").val(sum.toFixed(2));
}