獲取兩個表的總數

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 Demo

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. 設置html的cell-total = 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。除非需要傳統瀏覽器支持？您也可以考慮將輸入類型更改爲「數字」。這樣你可以減少你必須執行的額外檢查。

注：我沒有連接的功能「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/