我目前正在一个项目中,我需要在HTML表中查找某些行的平均值,该值会在值更改时自动更新。我不知道从哪里开始,因为我们被分配了这项工作,只是被告知在没有任何先验知识的情况下学习HTML,CSS和JavaScript,因此,如果这个问题是基本的,抱歉。我需要将平均值放在包含它们彼此相邻的每一行上的位置。
<table id="gradeTable"> <!Table>
<thead>
<tr id="Header">
<th>Student Name:</th>
<th>Student Number:</th>
<th>Assignment 1 %:</th>
<th>Assignment 2 %:</th>
<th>Assignment 3 %:</th>
<th>Assignment 4 %:</th>
<th>Assignment 5 %:</th>
<th>Final Grade %:</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Iden">Student A</td>
<td id="Iden">172300</td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td id="Final"></td>
</tr>
<tr>
<td id="Iden">Student B</td>
<td id="Iden">172301</td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td id="Final"></td>
</tr>
<tr>
<td id="Iden">Student C</td>
<td id="Iden">172302</td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td><input type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);"/></td>
<td id="Final"></td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
浏览以下解决方案。我已经根据每个学生的班级和ID来识别他们。在更改输入时,我得到了输入的类,然后遍历匹配相同类的每个输入值。我将这些值加起来,然后除以输入的输入值的数量。
function assignmentGrade(inp) {
var student = inp.className;
var studentScores = document.getElementsByClassName(student);
var totalScore = 0;
var numberScored = 0;
var avg = 0;
if (studentScores) {
for (var x = 0; x < studentScores.length; x++) {
if (!isNaN(studentScores[x].value) && studentScores[x].value != "") {
totalScore = totalScore + parseInt(studentScores[x].value);
numberScored++;
}
}
//
if (numberScored > 0) {
avg = (totalScore / numberScored).toFixed(2);;
document.getElementById(student).innerHTML = avg;
}
}
}
<table id="gradeTable">
<!Table>
<thead>
<tr id="Header">
<th>Student Name:</th>
<th>Student Number:</th>
<th>Assignment 1 %:</th>
<th>Assignment 2 %:</th>
<th>Assignment 3 %:</th>
<th>Assignment 4 %:</th>
<th>Assignment 5 %:</th>
<th>Final Grade %:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Student A</td>
<td id="IdenA">172300</td>
<td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="A" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td id="A"></td>
</tr>
<tr>
<td>Student B</td>
<td id="IdenB">172301</td>
<td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="B" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td id="B"></td>
</tr>
<tr>
<td>Student C</td>
<td id="IdenC">172302</td>
<td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td><input class="C" type="number" min="0" max="100" placeholder="-" onchange="assignmentGrade(this);" /></td>
<td id="C"></td>
</tr>
</tbody>
</table>