通过JQuery在表中的行中迭代列

Question

我在 JQuery 中遇到了 each() 的问题。我有一张包含学生信息的表格，包括：姓名、数学成绩、物理成绩、化学成绩和最后列是平均分，默认值为“?”。

我希望当我点击按钮帐户平均值时，列平均分数将显示平均值 =（数学 + 物理 + 化学）/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" />