列中的平均值並通過 javascript 求和所有行的平均值

Question

圖像1

來自圖像示例

使用分數的動態行並固定 5 列

在第一種情況下 -> 滿分 40 分給定分數 33,4,5 平均 14

最后，所有列相同的分數模式可以將所有平均分數相加並通過 javascript 打印在藍色區域

Answer 1

您想使用id選擇字段並將其轉換為Integer求和

暗示：

HTML

<input type='text' id="some_id1" value="33"/>
<input type='text' id="some_id6" value="4" />
<input type='text' id="some_id11" value="5" />

JS

Var sum1 = parseInt(document.getElementById("#some_id1").value) + parseInt(document.getElementById("#some_id6").value) + parseInt(document.getElementById("#some_id11").value);
Var average = sum / 3;

Answer 2

首先計算tbody所有rows (tr)存儲一個數組，然后找到與列對應的所有input ，然后使用map()方法input value與列相關的所有input value並存儲並返回到total變量中，最后將平均值顯示到tfoot的底行作為total/tr(tbody tr number) 。

有用的鏈接：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array /map https://www.w3schools.com/jsref/jsref_tofixed.asp

 function sumAverage(totalId, colNum){ var countNumberOfColumns = [...document.querySelectorAll('tbody tr')].length; var total = 0; var eachTbodyColumnInput = [...document.querySelectorAll('tbody td:nth-child('+ colNum+') input')]; var reformattedArray = eachTbodyColumnInput.map(function(obj){ if(obj.value!=null && obj.value!=''){ total += parseInt(obj.value); return total; } }); document.getElementById(totalId).innerHTML = (total/countNumberOfColumns).toFixed(2); } sumAverage('sumtotal_a', 2) sumAverage('sumtotal_b', 3) sumAverage('sumtotal_c', 4) sumAverage('sumtotal_d', 5) sumAverage('sumtotal_e', 6)

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container-fluid py-2"> <div class="row"> <div class="col-sm-12"> <div class="table-responsive"> <table class="table table-bordered align-middle"> <colgroup> <col width="25%"/> </colgroup> <thead class="bg-light"> <tr> <th>&nbsp;</th> <th>A(40)</th> <th>B(10)</th> <th>C(20)</th> <th>D(20)</th> <th>E(10)</th> </tr> </thead> <tbody> <tr> <td>XXXXX</td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_a',2)" onkeyup="sumAverage('sumtotal_a',2)" value="33"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_b',3)" onkeyup="sumAverage('sumtotal_b',3)" value="2"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_c',4)" onkeyup="sumAverage('sumtotal_c',4)" value="2"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_d',5)" onkeyup="sumAverage('sumtotal_d',5)" value="2"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_e',6)" onkeyup="sumAverage('sumtotal_e',6)" value="2"></td> </tr> <tr> <td>aaaaaa</td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_a',2)" onkeyup="sumAverage('sumtotal_a',2)" value="4"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_b',3)" onkeyup="sumAverage('sumtotal_b',3)" value="4"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_c',4)" onkeyup="sumAverage('sumtotal_c',4)" value="4"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_d',5)" onkeyup="sumAverage('sumtotal_d',5)" value="4"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_e',6)" onkeyup="sumAverage('sumtotal_e',6)" value="4"></td> </tr> <tr> <td>bbbbb</td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_a',2)" onkeyup="sumAverage('sumtotal_a',2)" value="5"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_b',3)" onkeyup="sumAverage('sumtotal_b',3)" value="5"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_c',4)" onkeyup="sumAverage('sumtotal_c',4)" value="5"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_d',5)" onkeyup="sumAverage('sumtotal_d',5)" value="5"></td> <td><input type="number" class="form-control form-control-sm" onchange="sumAverage('sumtotal_e',6)" onkeyup="sumAverage('sumtotal_e',6)" value="5"></td> </tr> </tbody> <tfoot class="alert-primary"> <tr> <th>Sum Total (Avg.)</th> <th id="sumtotal_a"></th> <th id="sumtotal_b"></th> <th id="sumtotal_c"></th> <th id="sumtotal_d"></th> <th id="sumtotal_e"></th> </tr> </tfoot> </table> </div> </div> </div> </div>