这个案例怎么用遍历数组解决
这个案例怎么用遍历数组解决，我这也太啰嗦了，谢谢：
*{
margin: 0;
height: 0;
}
em{
font-size: 8px;
}
.container{
position: relative;
width: 900px;
height: 600px;
background-color:aqua;
margin: 50px auto;
}
.box{
width: 800px;
height: 500px;
position: absolute;
margin: 10px 30px;
}
#title{
color:red;
font-size:28px;
text-align:center;
}
td,th{
height: 50px;
line-height: 50px;
font-size: 20px;
text-align:center;
/* border: 1px solid rgb(3, 65, 3); */
box-sizing: border-box;
}
input{
width: 80px;
height: 20px;
text-align: center;
font-size: 20px;
color:rgb(164, 5, 5) ;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: inset 0px 0px 5px;
background-color: rgb(98, 190, 106);
}
#average,#total{
width: 80px;
height: 23px;
text-align: center;
font-size: 22px;
color:rgb(116, 25, 26) ;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: inset 0px 0px 5px;
background-color: rgb(17, 159, 230);
}
<div class="container">
<em> ** 请在下表中输入各科成绩 ** </em>
<table class="box">
<tr>
<th id="title" colspan="7";>成 绩 表</th>
</tr>
<tr>
<th> </th>
<th>Jeck</th>
<th>Tom</th>
<th>Alic</th>
<th>Smith</th>
<th>Bosh</th>
<th>Lili</th>
</tr>
<tr>
<th>语文</th>
<td><input type="text" id="yj" oninput="Jeck()"></td>
<td><input type="text" id="yt" oninput="Tom()"></td>
<td><input type="text" id="ya" oninput="Alic()"></td>
<td><input type="text" id="ys" oninput="Smith()"></td>
<td><input type="text" id="yb" oninput="Bosh()"></td>
<td><input type="text" id="yl" oninput="Lili()"></td>
</tr>
<tr>
<th>数学</th>
<td><input type="text" id="sj" oninput="Jeck()"></td>
<td><input type="text" id="st" oninput="Tom()"></td>
<td><input type="text" id="sa" oninput="Alic()"></td>
<td><input type="text" id="ss" oninput="Smith()"></td>
<td><input type="text" id="sbb" oninput="Bosh()"></td>
<td><input type="text" id="sl" oninput="Lili()"></td>
</tr>
<tr>
<th>英语</th>
<td><input type="text" id="ej" oninput="Jeck()"></td>
<td><input type="text" id="et" oninput="Tom()"></td>
<td><input type="text" id="ea" oninput="Alic()"></td>
<td><input type="text" id="es" oninput="Smith()"></td>
<td><input type="text" id="eb" oninput="Bosh()"></td>
<td><input type="text" id="el" oninput="Lili()"></td>
</tr>
<tr>
<th>体育</th>
<td><input type="text" id="tj" oninput="Jeck()"></td>
<td><input type="text" id="tt" oninput="Tom()"></td>
<td><input type="text" id="ta" oninput="Alic()"></td>
<td><input type="text" id="ts" oninput="Smith()"></td>
<td><input type="text" id="tb" oninput="Bosh()"></td>
<td><input type="text" id="tl" oninput="Lili()"></td>
</tr>
<tr>
<th>音乐</th>
<td><input type="text" id="mj" oninput="Jeck()"></td>
<td><input type="text" id="mt" oninput="Tom()"></td>
<td><input type="text" id="ma" oninput="Alic()"></td>
<td><input type="text" id="ms" oninput="Smith()"></td>
<td><input type="text" id="mb" oninput="Bosh()"></td>
<td><input type="text" id="ml" oninput="Lili()"></td>
</tr>
<tr>
<th>美术</th>
<td><input type="text" id="aj" oninput="Jeck()"></td>
<td><input type="text" id="at" oninput="Tom()"></td>
<td><input type="text" id="aa" oninput="Alic()"></td>
<td><input type="text" id="as" oninput="Smith()"></td>
<td><input type="text" id="abb" oninput="Bosh()"></td>
<td><input type="text" id="al" oninput="Lili()"></td>
</tr>
<tr id="average">
<th >平均分</th>
<td><input type="text" id="vj" oninput="Jeck()"></td>
<td><input type="text" id="vt" oninput="Tom()"></td>
<td><input type="text" id="va" oninput="Alic()"></td>
<td><input type="text" id="vs" oninput="Smith()"></td>
<td><input type="text" id="vb" oninput="Bosh()"></td>
<td><input type="text" id="vl" oninput="Lili()"></td>
</tr>
<tr id="total">
<th >总成绩</th>
<td><input type="text" id="ttj" oninput="Jeck()"></td>
<td><input type="text" id="ttt" oninput="Tom()"></td>
<td><input type="text" id="tta" oninput="Alic()"></td>
<td><input type="text" id="tts" oninput="Smith()"></td>
<td><input type="text" id="ttb" oninput="Bosh()"></td>
<td><input type="text" id="ttl" oninput="Lili()"></td>
</tr>
</table>
</div>
</body>
function Jeck() {
let ja = document.getElementById("yj").value;
let jb = document.getElementById("sj").value;
let jc = document.getElementById("ej").value;
let jd = document.getElementById("tj").value;
let je = document.getElementById("mj").value;
let jf = document.getElementById("aj").value;
let jx = document.getElementById("ttj").value = (Number(ja) +Number(jb)+Number(jc)
+Number(jd)+Number(je) +Number(jf));
document.getElementById("vj").value = Math.round(jx/6);
}
function Tom() {
let ta = document.getElementById("yt").value;
let tb = document.getElementById("st").value;
let tc = document.getElementById("et").value;
let td = document.getElementById("tt").value;
let te = document.getElementById("mt").value;
let tf = document.getElementById("at").value;
let tx = document.getElementById("ttt").value = (Number(ta) +Number(tb)+Number(tc)
+Number(td)+Number(te) +Number(tf));
document.getElementById("vt").value = Math.round(tx/6);
}
function Alic(){
let aa = document.getElementById("ya").value;
let ab = document.getElementById("sa").value;
let ac = document.getElementById("ea").value;
let ad = document.getElementById("ta").value;
let ae = document.getElementById("ma").value;
let af = document.getElementById("aa").value;
let ax = document.getElementById("tta").value = (Number(aa) +Number(ab)+Number(ac)
+Number(ad)+Number(ae) +Number(af));
document.getElementById("va").value = Math.round(ax/6);
}
function Smith(){
let sa = document.getElementById("ys").value;
let sb = document.getElementById("ss").value;
let sc = document.getElementById("es").value;
let sd = document.getElementById("ts").value;
let se = document.getElementById("ms").value;
let sf = document.getElementById("as").value;
let sx = document.getElementById("tts").value = (Number(sa) +Number(sb)+Number(sc)
+Number(sd)+Number(se) +Number(sf));
document.getElementById("vs").value = Math.round(sx/6);
}
function Bosh(){
let ba = document.getElementById("yb").value;
let bb = document.getElementById("sbb").value;
let bc = document.getElementById("eb").value;
let bd = document.getElementById("tb").value;
let be = document.getElementById("mb").value;
let bf = document.getElementById("abb").value;
let bx = document.getElementById("ttb").value = (Number(ba) +Number(bb)+Number(bc)
+Number(bd)+Number(be) +Number(bf));
document.getElementById("vb").value = Math.round(bx/6);
}
function Lili(){
let la = document.getElementById("yl").value;
let lb = document.getElementById("sl").value;
let lc = document.getElementById("el").value;
let ld = document.getElementById("tl").value;
let le = document.getElementById("ml").value;
let lf = document.getElementById("al").value;
let lx = document.getElementById("ttl").value = (Number(la) +Number(lb)+Number(lc)
+Number(ld)+Number(le) +Number(lf));
document.getElementById("vl").value = Math.round(lx/6);
}
用一个json 格式数据渲染 就行。
[{name:"Jack",chinese:null,math:null, avg,totalScore}] //所有科目 然后 就是 平均分 总成绩
示例下，另外html也可以简化下，用class的形式，在js里监听事件
function getScore(ids = [], setId) {
let jx = 0
ids.forEach(id => {
jx += Number(document.getElementById(id).value);
})
document.getElementById(setId).value = Math.round(jx/6);
}
function Jeck() {
getScore(['yj', 'sj'], 'ttj')
}
原生js就这样吧，我就只写了第一个，你可以仿照改下后边的，根据name循环获取值，只用一个方法就行了，传个name进来
<!DOCTYPE html>
<html>
<head>
<style> </style>
<meta charset="utf-8">
<title>显示隐藏</title>
</head>
<div class="container">
<em> ** 请在下表中输入各科成绩 ** </em>
<table class="box">
<tr>
<th id="title" colspan="7";>成 绩 表</th>
</tr>
<tr>
<th> </th>
<th>Jeck</th>
<th>Tom</th>
<th>Alic</th>
<th>Smith</th>
<th>Bosh</th>
<th>Lili</th>
</tr>
<tr>
<th>语文</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" name="Tom" oninput="cal('Tom')"></td>
<td><input type="text" id="ya" oninput="Alic()"></td>
<td><input type="text" id="ys" oninput="Smith()"></td>
<td><input type="text" id="yb" oninput="Bosh()"></td>
<td><input type="text" id="yl" oninput="Lili()"></td>
</tr>
<tr>
<th>数学</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="st" oninput="cal('Tom')"></td>
<td><input type="text" id="sa" oninput="Alic()"></td>
<td><input type="text" id="ss" oninput="Smith()"></td>
<td><input type="text" id="sbb" oninput="Bosh()"></td>
<td><input type="text" id="sl" oninput="Lili()"></td>
</tr>
<tr>
<th>英语</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="et" oninput="Tom()"></td>
<td><input type="text" id="ea" oninput="Alic()"></td>
<td><input type="text" id="es" oninput="Smith()"></td>
<td><input type="text" id="eb" oninput="Bosh()"></td>
<td><input type="text" id="el" oninput="Lili()"></td>
</tr>
<tr>
<th>体育</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="tt" oninput="Tom()"></td>
<td><input type="text" id="ta" oninput="Alic()"></td>
<td><input type="text" id="ts" oninput="Smith()"></td>
<td><input type="text" id="tb" oninput="Bosh()"></td>
<td><input type="text" id="tl" oninput="Lili()"></td>
</tr>
<tr>
<th>音乐</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="mt" oninput="Tom()"></td>
<td><input type="text" id="ma" oninput="Alic()"></td>
<td><input type="text" id="ms" oninput="Smith()"></td>
<td><input type="text" id="mb" oninput="Bosh()"></td>
<td><input type="text" id="ml" oninput="Lili()"></td>
</tr>
<tr>
<th>美术</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="at" oninput="Tom()"></td>
<td><input type="text" id="aa" oninput="Alic()"></td>
<td><input type="text" id="as" oninput="Smith()"></td>
<td><input type="text" id="abb" oninput="Bosh()"></td>
<td><input type="text" id="al" oninput="Lili()"></td>
</tr>
<tr id="average">
<th >平均分</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="vt" oninput="Tom()"></td>
<td><input type="text" id="va" oninput="Alic()"></td>
<td><input type="text" id="vs" oninput="Smith()"></td>
<td><input type="text" id="vb" oninput="Bosh()"></td>
<td><input type="text" id="vl" oninput="Lili()"></td>
</tr>
<tr id="total">
<th >总成绩</th>
<td><input type="text" name="Jeck" oninput="cal('Jeck')"></td>
<td><input type="text" id="ttt" oninput="Tom()"></td>
<td><input type="text" id="tta" oninput="Alic()"></td>
<td><input type="text" id="tts" oninput="Smith()"></td>
<td><input type="text" id="ttb" oninput="Bosh()"></td>
<td><input type="text" id="ttl" oninput="Lili()"></td>
</tr>
</table>
</div>
<script>
function cal(name) {
let data = document.getElementsByName(name);
let sum=0;
for(var i=0;i<data.length-2;i++){
sum=sum+Number(data[i].value);
}
data[data.length-2].value=sum;
data[data.length-1].value=Math.round(sum/6);
}
</script>
</body>
</html>