[英]average in column and sum all row of average by javascript
from image example来自图像示例
use the dynamic row of score and fix 5 column使用分数的动态行并固定 5 列
in first case -> A Full Score as 40 point given score 33,4,5 has average 14在第一种情况下 -> 满分 40 分给定分数 33,4,5 平均 14
finally all column same pattern of score can sum all average score and print on Blue Area via javascript最后,所有列相同的分数模式可以将所有平均分数相加并通过 javascript 打印在蓝色区域
You want to pick field using id
and convert it to Integer
for sum您想使用
id
选择字段并将其转换为Integer
求和
Hint:暗示:
HTML 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 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;
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)
.首先计算tbody所有
rows (tr)
存储一个数组,然后找到与列对应的所有input
,然后使用map()
方法input value
与列相关的所有input value
并存储并返回到total
变量中,最后将平均值显示到tfoot的底行作为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 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> </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.