2つのテーブルの合計を取得します。

Question

ここでは、1列あたりの合計を計算する2つのHTMLテーブルがあります。

ここで私は2つのテーブルの総計を取得する方法がわからない私の問題

です。

セルの数値を変更したときにテーブルを動作させたい場合は、キーを押したときに合計値を再計算します。

また、どのように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 Demo

Answer 1

Iは<td> & <tr>

1. cell-valに次のクラスを追加しました：細胞を作るために：セル番号（理由が含まれていますセルは、計算
2. cell-numberの一部である値を含みます右揃え）
3. cell-total：セルに合計が含まれています
4. cell-grand-total：セルは総計
5. row-totalが含ま：行が合計値を
6. row-grand-totalが含ま：行は、私はcalculateSum()機能を変更した

総計を含んでいます。その中で、計算は、細胞の指標に基づいて行われる。上記のすべてのセル

和を設定td.cell-total

のインデックスを取得任意cell-total

1. の和を計算する

   は、そのインデックス（$(curTable).find("tr>td.cell-val:nth-child(" + indCell + ")")）

2. totalCol =合計で上記のすべての細胞を得ます（$(this).data('value', totalCol)）
3. のhtmlを設定してください。 = numberWithCommas(totalCol.toFixed(2))

ここで、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

はバニラのJSを使用して、すべての入力値を取得します。 jqueryの必要はありません。従来のブラウザサポートが必要な場合を除きますか？また、入力タイプを「番号」に変更することも考えられます。そうすれば、実行しなければならない追加チェックを減らすことができます。

NB：私は 'からkeyup' に機能を付属していないが、私はあなたがjsのコードである

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/