得到兩個表的總數

Question

我這里有兩個HTML表，用於計算每列的總數。

這是我的問題

我不知道如何獲得兩張桌子的總數。

當您更改單元格中的數字時，我希望顯示表格，我希望在按鍵時重新計算總數。

還有任何想法如何簡化我的JavaScript代碼。

這是我的第一張桌子的代碼。 請查看下面我的小提琴的鏈接以獲取完整的代碼。 謝謝。

    <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>

這是我的代碼和示例演示的小提琴。

JsFiddle演示

Answer 1

我在<td>和<tr>添加了以下類

1. cell-val ：單元格包含一個值，該值是計算的一部分
2. cell-number ：單元格包含一個數字（原因：使單元格正確對齊）
3. cell-total ：單元格包含總計
4. cell-grand-total ：單元格包含總計
5. row-total ：行包含總值
6. row-grand-total ：行包含總計

我修改了calculateSum()函數。 其中，基於單元的索引執行計算。

計算所有cell-total

1. 獲取td.cell-total的索引
2. 獲取該索引中的所有上述單元格（ $(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")") ））
3. totalCol =將以上所有單元格相加
4. 設置數據集中的總和以用於總計計算（ $(this).data('value', totalCol) ）
5. 設置cell-total = numberWithCommas(totalCol.toFixed(2))的html

在這里， numberWithCommas()將您的數字轉換為逗號分隔的值，因為它使數字可讀。

對總計進行類似的計算。

這是代碼段：讓我知道是否有任何問題

 $(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

您不需要對您的手機ID進行硬編碼。

如果您知道nth-child選擇器和index（）方法，則可以輕松實現。

這是有效的解決方案。

 $(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

使用vanilla js獲取所有輸入值。 無需jQuery。 除非需要舊版瀏覽器支持？ 另外，您可能需要考慮將輸入類型更改為“數字”。 這樣，您可以減少必須執行的其他檢查。

注意：我還沒有將功能附加到'keyup'上，但是我確定您可以管理它：)

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/