按 JQuery 迭代 table 中行中的列

Question

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

我希望当我点击帐户平均分时，列平均分会显示平均分=（数学+物理+化学）/3。目前，我将 3 个分数列的 class 保留为 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中添加一个新学生时，所有的分数都会在计算平均值时添加，我不知道该怎么办。请帮帮我，非常感谢。这是我的 table

<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

首先您必须使用 each 作为行 student-info class 并计算其 score class 元素值的总和然后计算该行的平均值并使用 student-info class

对其他行继续此过程

$("#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" />

Answer 2

问题是您一次性遍历所有“.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>

按 JQuery 迭代 table 中行中的列

iterate column in row in table by JQuery

html

javascript

each

jquery

frontend