得到两个表的总数

Question

I Have here an two HTML Table that computes the total per column.

Here's my problem

I don't know how to get the grand total of two tables.

I want to behave my table when you change the numbers in cell I want the total to recompute on keypress.

And also any idea how can I simplify my JavaScript codes.

Here's my code for my first table. Please see the link of my fiddle below for the complete codes. Thank you.

    <table style="border:1px solid purple">

    <tr id = "Tr1">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE2" /></td>
        <td><input class="cell3" type="text" name="cell3" value="267314.36"></td>
        <td><input class="cell4" type="text" name="cell4" value="5.95"></td>
        <td><input class="cell5" type="text" name="cell5" value ="1" ></td>
        <td><input class="cell6" type="text" name="cell6" value="267314.36"></td>
        <td><input class="cell7" type="text" name="cell7" value="5.95"></td>
        <td><input class="cell8" type="text" name="cell8" value=""></td>
        <td><input class="cell9" type="text" name="cell9" value="1"></td>
        <td><input class="cell10" type="text" name="cell10" value=""></td>
        <td><input class="cell11" type="text" name="cell11" value=""></td>
    </tr>

    <tr id = "Tr2">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE 3" /></td>
        <td><input class="cell3" type="text" name="cell3" value="259528.50"></td>
        <td><input class="cell4" type="text" name="cell4" value="6.27"></td>
        <td><input class="cell5" type="text" name="cell5" value ="2" ></td>
        <td><input class="cell6" type="text" name="cell6" value="519057.00"></td>
        <td><input class="cell7" type="text" name="cell7" value="12.54"></td>
        <td><input class="cell8" type="text" name="cell8" value="155717.10"></td>
        <td><input class="cell9" type="text" name="cell9" value="1"></td>
        <td><input class="cell10" type="text" name="cell10" value="155717.10"></td>
        <td><input class="cell11" type="text" name="cell11" value="6.27"></td>
    </tr>



    <tr id = "Tr9">
        <td>TOTAL</td>

        <td></td>
        <td></td>
        <td><div class = "" id = "total1">0.00</td>
        <td><div class = "" id = "total2">0.00</td>
        <td><div class = "" id = "total3">0.00</td>
        <td></td>
        <td><div class = "" id = "total4">0.00</td>
        <td><div class = "" id = "total5">0.00</td>
        <td><div class = "" id = "total6">0.00</td>
    </tr>
 </table>

Here's a fiddle for my code and sample demo.

JsFiddle Demo

Answer 1

I have added following classes to <td> & <tr>

1. cell-val : cell contains a value which is part of calculation
2. cell-number : cell contains a number (reason: to make cells right aligned)
3. cell-total : cell contains the total
4. cell-grand-total : cell contains the grand total
5. row-total : row contains the total value
6. row-grand-total : row contains the grand total

I have modified calculateSum() function. In it, calculations are performed on the basis of index of cells.

To calculate the sum of any cell-total

1. get the index of td.cell-total
2. get all above cells in that index ( $(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")") )
3. totalCol = sum all above cells
4. set the sum in dataset to use it in grand total calculations ( $(this).data('value', totalCol) )
5. set the html of cell-total = numberWithCommas(totalCol.toFixed(2))

Here, numberWithCommas() convert your number into comma separated values as it makes number readable.

Similar calculation is done for the grand-total.

Here is the snippet: Let me know if any issue

 $(document).ready(function() { $("input").keyup(function() { inputKeyUp(); calculateSum(); }); calculateSum(); inputKeyUp(); }); function inputKeyUp() { // TOTAL COST - 30s $("input[name='cell3']").each(function(index) { var cell3 = $("input[name='cell3']").eq(index).val(); var cell5 = $("input[name='cell5']").eq(index).val(); var cell6 = parseFloat(cell3) * parseFloat(cell5); if (cell3 == "") { cell6 = 0; } if (cell3 == "") { cell8 = 0; } else { var cell6 = parseFloat(cell3) * parseFloat(cell5); } if (!isNaN(cell6)) { $("input[name='cell6']").eq(index).val(cell6.toFixed(2)); } }); // TOTAL TARPs - 30s $("input[name='cell4']").each(function(index) { var cell4 = $("input[name='cell4']").eq(index).val(); var cell5 = $("input[name='cell5']").eq(index).val(); var cell7 = parseFloat(cell4) * parseFloat(cell5); if (cell4 == "") { cell7 = 0; } if (cell4 == "") { cell11 = 0; } else { var cell7 = parseFloat(cell4) * parseFloat(cell5); } if (!isNaN(cell7)) { $("input[name='cell7']").eq(index).val(cell7.toFixed(2)); } }); // COST/15s $("input[name='cell3']").each(function(index) { var cell3 = $("input[name='cell3']").eq(index).val(); var cell8 = parseFloat(cell3) * parseFloat(0.6); if (cell3 == "") { cell8 = 0; } else { var cell8 = parseFloat(cell3) * parseFloat(0.6); } if (!isNaN(cell8)) { $("input[name='cell8']").eq(index).val(cell8.toFixed(2)); } }); // TOTAL COST - 15s $("input[name='cell8']").each(function(index) { var cell8 = $("input[name='cell8']").eq(index).val(); var cell9 = $("input[name='cell9']").eq(index).val(); var cell10 = parseFloat(cell8) * parseFloat(cell9); if (cell9 == "") { cell10 = 0; } if (cell8 == "") { cell10 = 0; } else { var cell10 = parseFloat(cell8) * parseFloat(cell9); } if (!isNaN(cell10)) { $("input[name='cell10']").eq(index).val(cell10.toFixed(2)); } }); // TOTAL TARPs - 15s $("input[name='cell4']").each(function(index) { var cell4 = $("input[name='cell4']").eq(index).val(); var cell9 = $("input[name='cell9']").eq(index).val(); var cell11 = parseFloat(cell4) * parseFloat(cell9); if (cell9 == "") { cell11 = 0; } if (cell4 == "") { cell11 = 0; } else { var cell11 = parseFloat(cell4) * parseFloat(cell9); } if (!isNaN(cell11)) { $("input[name='cell11']").eq(index).val(cell11.toFixed(2)); } }); } function calculateSum() { $("table").each(function() { var curTable = this; $(this).find(".cell-total").each(function() { var indCell = ($(this).index() + 1), totalCol = 0, cellValue; $(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")").each(function() { cellValue = parseFloat($(this).find("input").val()); totalCol += cellValue || 0; }); $(this).data('value', totalCol); $(this).html(numberWithCommas(totalCol.toFixed(2))); }); }); $("table tr.row-grand-total td.cell-grand-total").each(function() { var indCell = ($(this).index() + 1), totalCol = 0, cellValue; $("table tr.row-total>td:nth-child(" + indCell + ")").each(function() { cellValue = parseFloat($(this).data("value")); totalCol += cellValue || 0; }); $(this).find("div").html(numberWithCommas(totalCol.toFixed(2))); }); } function numberWithCommas(x) { return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } 

 .cell-number, .cell-number input { text-align: right; } .row-grand-total { font-weight: bold; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <table style="border:1px solid purple"> <tr id="1"> <td> <input class="cell2" type="text" name="cell2" id="cell2" value="SAMPLE 1" /> </td> <td> <input class="cell3 cell-number" type="text" name="cell3" id="cell3" value="320000.00"> </td> <td> <input class="cell4 cell-number" type="text" name="cell4" id="cell4" value="8.16"> </td> <td class="cell-val"> <input class="cell5 cell-number" type="text" name="cell5" id="cell5" value="2"> </td> <td class="cell-val"> <input class="cell6 cell-number" type="text" name="cell6" id="cell6" value="640000.00"> </td> <td class="cell-val"> <input class="cell7 cell-number" type="text" name="cell7" id="cell7" value="16.32"> </td> <td> <input class="cell8 cell-number" type="text" name="cell8" id="cell8" value="192000.00"> </td> <td class="cell-val"> <input class="cell9 cell-number" type="text" name="cell9" id="cell9" value="5"> </td> <td class="cell-val"> <input class="cell10 cell-number" type="text" name="cell10" id="cell10" value="960,000.00"> </td> <td class="cell-val"> <input class="cell11 cell-number" type="text" name="cell11" id="cell11" value="40.80"> </td> </tr> <tr id="Tr1"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE2" /> </td> <td> <input class="cell3 cell-number" type="text" name="cell3" value="267314.36"> </td> <td> <input class="cell4 cell-number" type="text" name="cell4" value="5.95"> </td> <td class="cell-val"> <input class="cell5 cell-number" type="text" name="cell5" value="1"> </td> <td class="cell-val"> <input class="cell6 cell-number" type="text" name="cell6" value="267314.36"> </td> <td class="cell-val"> <input class="cell7 cell-number" type="text" name="cell7" value="5.95"> </td> <td> <input class="cell8 cell-number" type="text" name="cell8" value=""> </td> <td class="cell-val"> <input class="cell9 cell-number" type="text" name="cell9" value="1"> </td> <td class="cell-val"> <input class="cell10 cell-number" type="text" name="cell10" value=""> </td> <td class="cell-val"> <input class="cell11 cell-number" type="text" name="cell11" value=""> </td> </tr> <tr id="Tr2"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE 3" /> </td> <td> <input class="cell3 cell-number" type="text" name="cell3" value="259528.50"> </td> <td> <input class="cell4 cell-number" type="text" name="cell4" value="6.27"> </td> <td class="cell-val"> <input class="cell5 cell-number" type="text" name="cell5" value="2"> </td> <td class="cell-val"> <input class="cell6 cell-number" type="text" name="cell6" value="519057.00"> </td> <td class="cell-val"> <input class="cell7 cell-number" type="text" name="cell7" value="12.54"> </td> <td> <input class="cell8 cell-number" type="text" name="cell8" value="155717.10"> </td> <td class="cell-val"> <input class="cell9 cell-number" type="text" name="cell9" value="1"> </td> <td class="cell-val"> <input class="cell10 cell-number" type="text" name="cell10" value="155717.10"> </td> <td class="cell-val"> <input class="cell11 cell-number" type="text" name="cell11" value="6.27"> </td> </tr> <tr id="Tr3"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE 4" /> </td> <td> <input class="cell3 cell-number" type="text" name="cell3" value="243013.04"> </td> <td> <input class="cell4 cell-number" type="text" name="cell4" value="7.24"> </td> <td class="cell-val"> <input class="cell5 cell-number" type="text" name="cell5" value="1"> </td> <td class="cell-val"> <input class="cell6 cell-number" type="text" name="cell6" value="243013.04"> </td> <td class="cell-val"> <input class="cell7 cell-number" type="text" name="cell7" value="7.24"> </td> <td> <input class="cell8 cell-number" type="text" name="cell8" value="145807.82"> </td> <td class="cell-val"> <input class="cell9 cell-number" type="text" name="cell9" value="6"> </td> <td class="cell-val"> <input class="cell10 cell-number" type="text" name="cell10" value="874846.92"> </td> <td class="cell-val"> <input class="cell11 cell-number" type="text" name="cell11" value="43.44"> </td> </tr> <tr id="Tr9" class="row-total"> <td>TOTAL</td> <td></td> <td></td> <td class="cell-total cell-number"> <div class="" id="total1">0.00</td> <td class="cell-total cell-number"> <div class="" id="total2">0.00</td> <td class="cell-total cell-number"> <div class="" id="total3">0.00</td> <td></td> <td class="cell-total cell-number"> <div class="" id="total4">0.00</td> <td class="cell-total cell-number"> <div class="" id="total5">0.00</td> <td class="cell-total cell-number"> <div class="" id="total6">0.00</td> </tr> </table> <br /> <table style="border:1px solid purple"> <tr id="Tr4"> <td> <input class="celltab2" type="text" name="celltab2" id="celltab2" value="SAMPLE 1" /> </td> <td> <input class="celltab3 cell-number" type="text" name="celltab3" id="celltab3" value="320000.00"> </td> <td> <input class="celltab4 cell-number" type="text" name="celltab4" id="celltab4" value="8.16"> </td> <td class="cell-val"> <input class="celltab5 cell-number" type="text" name="celltab5" id="celltab5" value="2"> </td> <td class="cell-val"> <input class="celltab6 cell-number" type="text" name="celltab6" id="celltab6" value="640000.00"> </td> <td class="cell-val"> <input class="celltab7 cell-number" type="text" name="celltab7" id="celltab7" value="16.32"> </td> <td> <input class="celltab8 cell-number" type="text" name="celltab8" id="celltab8" value="192000.00"> </td> <td class="cell-val"> <input class="celltab9 cell-number" type="text" name="celltab9" id="celltab9" value="5"> </td> <td class="cell-val"> <input class="celltab10 cell-number" type="text" name="celltab10" id="celltab10" value="960,000.00"> </td> <td class="cell-val"> <input class="celltab11 cell-number" type="text" name="celltab11" id="celltab11" value="40.80"> </td> </tr> <tr id="Tr5"> <td> <input class="celltab2" type="text" name="celltab2" value="SAMPLE 2" /> </td> <td> <input class="celltab3 cell-number" type="text" name="celltab3" value=" 219,082.50"> </td> <td> <input class="celltab4 cell-number" type="text" name="celltab4" value="6.21"> </td> <td class="cell-val"> <input class="celltab5 cell-number" type="text" name="celltab5" value="0"> </td> <td class="cell-val"> <input class="celltab6 cell-number" type="text" name="celltab6" value="0"> </td> <td class="cell-val"> <input class="celltabe7 cell-number" type="text" name="celltab7" value="0"> </td> <td> <input class="celltab8 cell-number" type="text" name="celltab8" value="131449.50"> </td> <td class="cell-val"> <input class="celltab9 cell-number" type="text" name="celltab9" value="7"> </td> <td class="cell-val"> <input class="celltab10 cell-number" type="text" name="celltab10" value="920146.50"> </td> <td class="cell-val"> <input class="celltab11 cell-number" type="text" name="celltab11" value="43.47"> </td> </tr> <tr id="Tr6"> <td> <input class="celltab2" type="text" name="cell2" value="SAMPLE 3" /> </td> <td> <input class="celltab3 cell-number" type="text" name="cell3" value="224700.00"> </td> <td> <input class="celltab4 cell-number" type="text" name="cell4" value="5.23"> </td> <td class="cell-val"> <input class="celltab5 cell-number" type="text" name="cell5" value=""> </td> <td class="cell-val"> <input class="celltab6 cell-number" type="text" name="cell6" value=""> </td> <td class="cell-val"> <input class="celltab7 cell-number" type="text" name="cell7" value=""> </td> <td> <input class="celltab8 cell-number" type="text" name="cell8" value="134820.00"> </td> <td class="cell-val"> <input class="celltab9 cell-number" type="text" name="cell9" value="6"> </td> <td class="cell-val"> <input class="celltab10 cell-number" type="text" name="cell10" value="808920.00"> </td> <td class="cell-val"> <input class="celltab11 cell-number" type="text" name="cell11" value="34.38"> </td> </tr> <tr id="Tr7"> <td> <input class="celltab2" type="text" name="celltab2" value="SAMPLE 4" /> </td> <td> <input class="celltab3 cell-number" type="text" name="celltab3" value="243013.04"> </td> <td> <input class="celltab4 cell-number" type="text" name="celltab4" value="7.67"> </td> <td class="cell-val"> <input class="celltab5 cell-number" type="text" name="celltab5" value="2"> </td> <td class="cell-val"> <input class="celltab6 cell-number" type="text" name="celltab6" value="243013.04"> </td> <td class="cell-val"> <input class="celltab7 cell-number" type="text" name="celltab7" value="7.24"> </td> <td> <input class="celltab8 cell-number" type="text" name="celltab8" value="145807.82"> </td> <td class="cell-val"> <input class="celltab9 cell-number" type="text" name="celltab9" value="6"> </td> <td class="cell-val"> <input class="celltab10 cell-number" type="text" name="celltab10" value="874846.92"> </td> <td class="cell-val"> <input class="celltab11 cell-number" type="text" name="celltab11" value="43.44"> </td> </tr> <tr id="Tr8" class="row-total"> <td>TOTAL</td> <td></td> <td></td> <td class="cell-total cell-number"> <div class="" id="totaltab1">0.00</td> <td class="cell-total cell-number"> <div class="" id="totaltab2">0.00</td> <td class="cell-total cell-number"> <div class="" id="totaltab3">0.00</td> <td></td> <td class="cell-total cell-number"> <div class="" id="totaltab4">0.00</td> <td class="cell-total cell-number"> <div class="" id="totaltab5">0.00</td> <td class="cell-total cell-number"> <div class="" id="totaltab6">0.00</td> </tr> <tr id="Tr10" class="row-grand-total"> <td>GRAND TOTAL</td> <td></td> <td></td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot1">0.00</td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot2">0.00</td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot3">0.00</td> <td></td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot4">0.00</td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot5">0.00</td> <td class="cell-grand-total cell-number"> <div class="" id="grandtot6">0.00</td> </tr> </table> </body> </html> 

Answer 2

You dont need to hard code your cell ids.

If you know nth-child selector and index() method, you could do it easily.

Here is the working solution.

 $(function() { $(document).on("keyup", "input[type='text']", function(event) { var $cell = $(event.target).parent(); var index = $cell.index() + 1; var $containerTable = $cell.closest("table"); var sum = 0; //iterate over the entire columns that you want to have total caluculated. $.each($("td:nth-child(" + index + ")", $containerTable), function(idx, cell) { sum += ($(cell).find("input").length) ? +($(cell).find("input").val()) : 0; }); //Once caculated, update the corresponding result cell on that table. $(".result td:eq(" + (index - 1) + ") div", $containerTable).html(sum); //Once result is calculated, update the grand total by iterating over the grand total cells. $.each($(".grand-result div"), function(idx, grCell) { var resultIndex = $(grCell).parent().index(); var grandSum = 0; $.each($(".result td:nth-child(" + (resultIndex + 1) + ")"), function(idx, resultCell) { grandSum += ($(resultCell).find("div").length) ? +($(resultCell).find("div").html()) : 0; }); $(grCell).text(grandSum); }); }); $("input[type='text']").trigger("keyup"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="border:1px solid purple"> <tr id="1"> <td> <input class="cell2" type="text" name="cell2" id="cell2" value="SAMPLE 1" /> </td> <td> <input class="cell3" type="text" name="cell3" id="cell3" value="320000.00"> </td> <td> <input class="cell4" type="text" name="cell4" id="cell4" value="8.16"> </td> <td> <input class="cell5" type="text" name="cell5" id="cell5" value="2"> </td> <td> <input class="cell6" type="text" name="cell6" id="cell6" value="640000.00"> </td> <td> <input class="cell7" type="text" name="cell7" id="cell7" value="16.32"> </td> <td> <input class="cell8" type="text" name="cell8" id="cell8" value="192000.00"> </td> <td> <input class="cell9" type="text" name="cell9" id="cell9" value="5"> </td> <td> <input class="cell10" type="text" name="cell10" id="cell10" value="960,000.00"> </td> <td> <input class="cell11" type="text" name="cell11" id="cell11" value="40.80"> </td> </tr> <tr id="Tr1"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE2" /> </td> <td> <input class="cell3" type="text" name="cell3" value="267314.36"> </td> <td> <input class="cell4" type="text" name="cell4" value="5.95"> </td> <td> <input class="cell5" type="text" name="cell5" value="1"> </td> <td> <input class="cell6" type="text" name="cell6" value="267314.36"> </td> <td> <input class="cell7" type="text" name="cell7" value="5.95"> </td> <td> <input class="cell8" type="text" name="cell8" value=""> </td> <td> <input class="cell9" type="text" name="cell9" value="1"> </td> <td> <input class="cell10" type="text" name="cell10" value=""> </td> <td> <input class="cell11" type="text" name="cell11" value=""> </td> </tr> <tr id="Tr2"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE 3" /> </td> <td> <input class="cell3" type="text" name="cell3" value="259528.50"> </td> <td> <input class="cell4" type="text" name="cell4" value="6.27"> </td> <td> <input class="cell5" type="text" name="cell5" value="2"> </td> <td> <input class="cell6" type="text" name="cell6" value="519057.00"> </td> <td> <input class="cell7" type="text" name="cell7" value="12.54"> </td> <td> <input class="cell8" type="text" name="cell8" value="155717.10"> </td> <td> <input class="cell9" type="text" name="cell9" value="1"> </td> <td> <input class="cell10" type="text" name="cell10" value="155717.10"> </td> <td> <input class="cell11" type="text" name="cell11" value="6.27"> </td> </tr> <tr id="Tr3"> <td> <input class="cell2" type="text" name="cell2" value="SAMPLE 4" /> </td> <td> <input class="cell3" type="text" name="cell3" value="243013.04"> </td> <td> <input class="cell4" type="text" name="cell4" value="7.24"> </td> <td> <input class="cell5" type="text" name="cell5" value="1"> </td> <td> <input class="cell6" type="text" name="cell6" value="243013.04"> </td> <td> <input class="cell7" type="text" name="cell7" value="7.24"> </td> <td> <input class="cell8" type="text" name="cell8" value="145807.82"> </td> <td> <input class="cell9" type="text" name="cell9" value="6"> </td> <td> <input class="cell10" type="text" name="cell10" value="874846.92"> </td> <td> <input class="cell11" type="text" name="cell11" value="43.44"> </td> </tr> <tr id="Tr9" class="result"> <td>TOTAL</td> <td></td> <td></td> <td> <div class="" id="total1">0.00</div> </td> <td> <div class="" id="total2">0.00</div> </td> <td> <div class="" id="total3">0.00</div> </td> <td></td> <td> <div class="" id="total4">0.00</div> </td> <td> <div class="" id="total5">0.00</div> </td> <td> <div class="" id="total6">0.00</div> </td> </tr> </table> <br /> <table style="border:1px solid purple"> <tr id="Tr4"> <td> <input class="celltab2" type="text" name="celltab2" id="celltab2" value="SAMPLE 1" /> </td> <td> <input class="celltab3" type="text" name="celltab3" id="celltab3" value="320000.00"> </td> <td> <input class="celltab4" type="text" name="celltab4" id="celltab4" value="8.16"> </td> <td> <input class="celltab5" type="text" name="celltab5" id="celltab5" value="2"> </td> <td> <input class="celltab6" type="text" name="celltab6" id="celltab6" value="640000.00"> </td> <td> <input class="celltab7" type="text" name="celltab7" id="celltab7" value="16.32"> </td> <td> <input class="celltab8" type="text" name="celltab8" id="celltab8" value="192000.00"> </td> <td> <input class="celltab9" type="text" name="celltab9" id="celltab9" value="5"> </td> <td> <input class="celltab10" type="text" name="celltab10" id="celltab10" value="960,000.00"> </td> <td> <input class="celltab11" type="text" name="celltab11" id="celltab11" value="40.80"> </td> </tr> <tr id="Tr5"> <td> <input class="celltab2" type="text" name="celltab2" value="SAMPLE 2" /> </td> <td> <input class="celltab3" type="text" name="celltab3" value=" 219,082.50"> </td> <td> <input class="celltab4" type="text" name="celltab4" value="6.21"> </td> <td> <input class="celltab5" type="text" name="celltab5" value="0"> </td> <td> <input class="celltab6" type="text" name="celltab6" value="0"> </td> <td> <input class="celltabe7" type="text" name="celltab7" value="0"> </td> <td> <input class="celltab8" type="text" name="celltab8" value="131449.50"> </td> <td> <input class="celltab9" type="text" name="celltab9" value="7"> </td> <td> <input class="celltab10" type="text" name="celltab10" value="920146.50"> </td> <td> <input class="celltab11" type="text" name="celltab11" value="43.47"> </td> </tr> <tr id="Tr6"> <td> <input class="celltab2" type="text" name="cell2" value="SAMPLE 3" /> </td> <td> <input class="celltab3" type="text" name="cell3" value="224700.00"> </td> <td> <input class="celltab4" type="text" name="cell4" value="5.23"> </td> <td> <input class="celltab5" type="text" name="cell5" value=""> </td> <td> <input class="celltab6" type="text" name="cell6" value=""> </td> <td> <input class="celltab7" type="text" name="cell7" value=""> </td> <td> <input class="celltab8" type="text" name="cell8" value="134820.00"> </td> <td> <input class="celltab9" type="text" name="cell9" value="6"> </td> <td> <input class="celltab10" type="text" name="cell10" value="808920.00"> </td> <td> <input class="celltab11" type="text" name="cell11" value="34.38"> </td> </tr> <tr id="Tr7"> <td> <input class="celltab2" type="text" name="celltab2" value="SAMPLE 4" /> </td> <td> <input class="celltab3" type="text" name="celltab3" value="243013.04"> </td> <td> <input class="celltab4" type="text" name="celltab4" value="7.67"> </td> <td> <input class="celltab5" type="text" name="celltab5" value="2"> </td> <td> <input class="celltab6" type="text" name="celltab6" value="243013.04"> </td> <td> <input class="celltab7" type="text" name="celltab7" value="7.24"> </td> <td> <input class="celltab8" type="text" name="celltab8" value="145807.82"> </td> <td> <input class="celltab9" type="text" name="celltab9" value="6"> </td> <td> <input class="celltab10" type="text" name="celltab10" value="874846.92"> </td> <td> <input class="celltab11" type="text" name="celltab11" value="43.44"> </td> </tr> <tr id="Tr8" class="result"> <td>TOTAL</td> <td></td> <td></td> <td> <div class="" id="totaltab1">0.00</div> </td> <td> <div class="" id="totaltab2">0.00</div> </td> <td> <div class="" id="totaltab3">0.00</div> </td> <td></td> <td> <div class="" id="totaltab4">0.00</div> </td> <td> <div class="" id="totaltab5">0.00</div> </td> <td> <div class="" id="totaltab6">0.00</div> </td> </tr> <tr id="Tr10" class="grand-result"> <td>GRAND TOTAL</td> <td></td> <td></td> <td> <div class="" id="grandtot1">0.00</div> </td> <td> <div class="" id="grandtot2">0.00</div> </td> <td> <div class="" id="grandtot3">0.00</div> </td> <td></td> <td> <div class="" id="grandtot4">0.00</div> </td> <td> <div class="" id="grandtot5">0.00</div> </td> <td> <div class="" id="grandtot6">0.00</div> </td> </tr> </table> 

Answer 3

get all inputs values using vanilla js. No need for jquery. Unless need legacy browser support? Also you may want to consider changing input type to "number". That way you can reduce the additional checks you have to carry out.

NB: I haven't attached the function to 'keyup' but I am sure you can manage that :)

let fields = document.querySelectorAll('input');
let value = 0;

for (i = 0; i < fields.length; i++) {
  let itemVal = fields[i].value;
  if (!isNaN(itemVal) && itemVal != '') { // May need additional checks/regex to make sure value is a number
    console.log(itemVal)
    value = value + parseFloat(itemVal)

  } 
}

console.log(value)

https://jsfiddle.net/fobpoLtL/1/