JSFiddle - React, Tailwind, and code Playground

by anubhavranjan

HTML

<table id="inputTable">
    <tr>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td class="total">0</td>
    </tr>
    <tr>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td class="total">0</td>
    </tr>
    <tr>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td>
            <input value="0" />
        </td>
        <td class="total">0</td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
    //$("input").each(function () {
      //  $(this).keyup(function () {
        //    newSum();
        //});
    //});
    $("input").keyup(function() {
        newSum();
    });
    
});

function newSum() {
    var sum = 0;
    var thisRow = $(this).closest('tr');

    var total = 0;
    var trs = $("#inputTable tr");
    for(var i=0; i< trs.length; i++)
    {
        var inputs = $(trs).find("input");
        var tot = 0;
        for(var j=0; j<inputs.length; j++)
        {
            tot+= $(inputs[j]).val();            
        }
        var totInput = $(trs).find(".total").text(tot);
    }
    //iterate through each input and add to sum
    //$(thisRow).find("td:not(.total) input").each(function () {

      //  sum += parseInt(this.value);
    //});
    //change value of total
    //$(thisRow).find(".total").html(sum);


    // the grand total
    //$('.total').each(function () {
      //  total += parseInt($(this).html());
    //});

}