javascript - 如何使用javascript从带有记录列表的输入框中获取平均值？

Question

我是 js 初学者...我想显示学生列表。这样，ppl可以在输入框中直接编辑2个成绩值，并且平均成绩会自动计算并导入到第3个输入框中。我可以用 1 个人来做，但 2 或更多我不知道该怎么做。有人可以帮助我吗？

这是我的代码:https://jsfiddle.net/sxxfrppo/

JS:

$(document).ready(function() {
  $('[id^=grade]').on('change', function() {
    var grade = 0;

    $('[id^=grade]').each(function(index) {

      grade += parseFloat($(this).val() ? $(this).val() : 0);
    });

    var avggrade = $('#avg').val(grade.toFixed(2)/2);

  });
});

Answer 1

Element.id 在 doucment 中应该是唯一的。将 html 处以 grade 开头的重复 id 和 avg 替换为 className 。使用[class*=grade]选择器选择className中包含grade的所有元素，$(this).closest( "tr") 选择发生 change 事件的父元素。

您还可以替换三元 $(this).val() ？ $(this).val() : 0 与 +this).value 其中 + 运算符将 .value 转换为 输入元素到数字。

$(document).ready(function() {
  var grades = $("[class*=grade]")
  grades.on("change", function() {
    var grade = 0;
    var tr = $(this).closest("tr");
    $(grades, tr).each(function(index) {
      grade += +this.value;
    });

    var avggrade = $(".avg", tr).val(grade.toFixed(2) / 2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
  <thead class="">
    <tr>
      <th width="40" class="text-center">
        #
      </th>
      <th>
        Name
      </th>
      <th>
        Grade 1
      </th>
      <th>
        Grade 2
      </th>
      <th>
        AVG
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>
        Luna
      </td>
      <td>
        <input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" />
      </td>
      <td>
        <input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" />
      </td>
      <td>
        <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" />
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        John
      </td>
      <td>
        <input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" />
      </td>
      <td>
        <input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" />
      </td>
      <td>
        <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" />
      </td>
    </tr>
  </tbody>
</table>

jsfiddle https://jsfiddle.net/sxxfrppo/1/