average in column and sum all row of average by javascript

Question

img1

from image example

use the dynamic row of score and fix 5 column

in first case -> A Full Score as 40 point given score 33,4,5 has average 14

finally all column same pattern of score can sum all average score and print on Blue Area via javascript

Answer 1

You want to pick field using id and convert it to Integer for sum

Hint:

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

First count tbody all rows (tr) to store an array then find all input corresponding to column and then use map() method to calulate all input value related to column and store & return into total variable then finally show average into bottom row of tfoot as total/tr(tbody tr number) .

Helpful Links :
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>