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

Posted 2023-03-16

【中文标题】通过JQuery在表中的行中迭代列

【英文标题】：iterate column in row in table by JQuery

【发布时间】：2021-10-20 04:10:54

【问题描述】：

我在 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>

【参考方案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>

【讨论】：

哦，非常感谢，我已经被这个问题困扰了将近 1 周。即使我有额外的点数，你的方法也能解决。

【参考方案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" />

【讨论】：

非常感谢。真的解决了我的问题