用JQuery迭代表中行中的列

Question

我有一个问题与each()在JQuery。我有一个包含学生信息的表，包括:name，数学成绩，物理分数，化学分数最后一列为平均分默认值为"?"

我想当我点击按钮帐户平均，列平均分数将显示平均=(数学+物理+化学)/3。目前，我将3个分数列的类保留为score，并像这样迭代:

$("#btn-average").click(function() {
var sum = 0;
$(".score").each(function(value) {
value = parseFloat($(this).text());
sum += value;
});
var average = sum / 3;
$(".average-score").text(average.toFixed(1));
});

然而，如果当我向表中添加一个新学生时，所有的分数都会在计算平均值时被添加，我不知道该怎么办。请帮帮我，非常感谢。这是我的表

<table id="my-table" class="student-score">
<tr>
<th class="table-name-column"></th>
<th class="table-name-column">name</th>
<th class="table-name-column">math score</th>
<th class="table-name-column">physical score</th>
<th class="table-name-column">chemistry score</th>
<th class="table-name-column">average score</th>
</tr>
<tr class="student-info">
<td class="table-content">1</td>
<td class="table-content">Peter</td>
<td id="math-score" class="table-content score">9</td>
<td id="physical-score" class="table-content score">8.5</td>
<td id="chemistry-score" class="table-content score">7.5</td>
<td id="average-score" class="table-content average-score">?</td>
</tr>
</table>

Answer 1

问题是你遍历了所有的"。score"字段，你需要把它分解成单独的块。

最常见的方法是迭代行，并在其中迭代"。score"字段。

下面是一个例子:

$("#btn-average").click(function() {
$(".student-info").each(function() {
let sum = 0;
let count = 0;
$(this).find(".score").each(function() {
value = parseFloat($(this).text());
sum += value;
count++;
});
const average = sum / count;
$(this).find(".average-score").text(average.toFixed(1));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table" class="student-score">
<tr>
<th class="table-name-column"></th>
<th class="table-name-column">name</th>
<th class="table-name-column">math score</th>
<th class="table-name-column">physical score</th>
<th class="table-name-column">chemistry score</th>
<th class="table-name-column">average score</th>
</tr>
<tr class="student-info">
<td class="table-content">1</td>
<td class="table-content">Peter</td>
<td id="math-score" class="table-content score">9</td>
<td id="physical-score" class="table-content score">8.5</td>
<td id="chemistry-score" class="table-content score">7.5</td>
<td id="average-score" class="table-content average-score">?</td>
</tr>
<tr class="student-info">
<td class="table-content">2</td>
<td class="table-content">Max</td>
<td id="math-score" class="table-content score">3</td>
<td id="physical-score" class="table-content score">5.5</td>
<td id="chemistry-score" class="table-content score">9.5</td>
<td id="average-score" class="table-content average-score">?</td>
</tr>
</table>
<button id="btn-average">calc sum</button>

Answer 2

首先，您必须使用each作为student-info类的行，并计算其score类元素值的总和，然后计算该行的平均值，并对student-info类的其他行继续此过程

$("#btn-average").click(function() {
$(".student-info").each(function(){
var sum = 0;
$(this).find(".score").each(function(value) {
value = parseFloat($(this).text());
sum += value;
});
var average = sum / 3;
$(this).find(".average-score").text(average.toFixed(1));
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table" class="student-score">
<tr>
<th class="table-name-column"></th>
<th class="table-name-column">name</th>
<th class="table-name-column">math score</th>
<th class="table-name-column">physical score</th>
<th class="table-name-column">chemistry score</th>
<th class="table-name-column">average score</th>
</tr>
<tr class="student-info">
<td class="table-content">1</td>
<td class="table-content">Peter</td>
<td id="math-score" class="table-content score">9</td>
<td id="physical-score" class="table-content score">8.5</td>
<td id="chemistry-score" class="table-content score">7.5</td>
<td id="average-score" class="table-content average-score">?</td>
</tr>
<tr class="student-info">
<td class="table-content">1</td>
<td class="table-content">Peter</td>
<td id="math-score" class="table-content score">8</td>
<td id="physical-score" class="table-content score">9.5</td>
<td id="chemistry-score" class="table-content score">6.5</td>
<td id="average-score" class="table-content average-score">?</td>
</tr>
</table>
<input type="button" id="btn-average" value="AVG" />