如何为学生成绩表单的每行计算独立总分？

我在学校Web应用中设有供教师录入学生成绩的表单，原本设计为每行末尾自动计算对应学生的输入成绩总和，但当前所有行均显示所有学生的总分，而非每行学生的独立总分，无成绩的行也受此影响。请问如何实现每行的独立总分计算？

现有代码 #

PHP 部分 #

<?php if($class_id >= 1 && $class_id <= 4 && $student['is_secmid'] == 1){?>

<form method="post" action="<?php echo site_url('admin/examgroup/entrymarks') ?>" id="assign_form1111">

    <input type="hidden" id="max_mark" value="<?php echo $subject_detail->max_marks; ?>">
 <?php

    if (isset($resultlist) && !empty($resultlist)) {

        ?>
<div class="row">
  <div class="col-md-12">
 <input type="hidden" name="exam_group_class_batch_exam_subject_id" value="<?php echo $exam_group_class_batch_exam_subject_id; ?>">
 <div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>C.A 1 (10.0)</th>
<th>C.A 2 (10.0)</th>
     </tr>
</thead>
 <tbody>
<?php if (empty($resultlist)) {
?>
<tr>
<td colspan="7" class="text-danger text-center"><?php echo $this->lang->line('no_record_found'); ?></td>
</tr>
<?php
} else {
foreach ($resultlist as $student) {
?>
<tr class="std_adm_<?php echo $student['admission_no']; ?>">
<input type="hidden" name="prev_id[<?php echo $student['exam_group_class_batch_exam_students_id'] ?>]" value="<?php echo $student['exam_group_exam_result_id'] ?>">
 <input type="hidden" name="exam_group_student_id[]" value="<?php echo $student['exam_group_class_batch_exam_students_id'] ?>">
<td><?php echo $student['admission_no']; ?></td>
<td style="white-space: nowrap;"><?php echo $student['lastname'] . " " . $student['firstname']; ?></td>
<td> <input type="number" class="marksssss2 form-control" min="0" max="10" name="exam_group_student_ca1_<?php echo $student['exam_group_class_batch_exam_students_id']; ?>" value="<?php echo $student['exam_group_exam_result_get_ca1']; ?>" step="any"></td>

<td> <input type="number" class="marksssss3 form-control" min="0" max="10" name="exam_group_student_ca2_<?php echo $student['exam_group_class_batch_exam_students_id']; ?>" value="<?php echo $student['exam_group_exam_result_get_ca2']; ?>" step="any"></td>

<td> <output class="result"></output></td>
</tr>
<?php
}
}
 ?>
</tbody>
</table>
</div>

<?php if ($this->rbac->hasPrivilege('exam_marks', 'can_edit')) { ?>

  <button type="submit" class="allot-fees btn btn-primary btn-sm pull-right" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Please Wait.."><?php echo $this->lang->line('save'); ?>

    </button>

    <?php } ?>

  </div>

</div>
<?php } ?>

JavaScript 部分 #

<script>
const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  var parent = $(this).closest('.row');
  parent.find('input[type="number"]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  parent.find('.result').html(total);
});

</script>

解决方案 #

问题出在JavaScript的父元素选择上：你当前用closest('.row')选中的是整个表格所在的外层行容器，这会遍历所有输入框计算总和，然后更新所有.result元素。正确的做法是定位到当前输入框所在的学生行<tr>，只计算该行内的成绩输入框，再更新该行的总分输出。

修改后的JavaScript代码如下：

<script>
const $inputs = $('input[type="number"]');

// 定义计算单一行总分的函数
function calculateRowTotal($row) {
  let total = 0;
  $row.find('input[type="number"]').each(function() {
    const value = $(this).val().trim();
    if (value !== '') {
      total += parseFloat(value); // 用parseFloat支持小数成绩
    }
  });
  $row.find('.result').text(total.toFixed(1)); // 保留一位小数，符合成绩格式
}

// 输入框变化时计算当前行总分
$inputs.on('input change', function() {
  const $row = $(this).closest('tr');
  calculateRowTotal($row);
});

// 页面加载时初始化所有行的总分
$(document).ready(function() {
  $('tbody tr').each(function() {
    calculateRowTotal($(this));
  });
});
</script>

修改说明 #

1. 父元素修正：将closest('.row')改为closest('tr')，确保只针对当前学生所在的行进行计算。
2. 支持小数成绩：用parseFloat替代parseInt，适配带小数的成绩输入。
3. 初始化计算：页面加载时自动计算已有成绩的行总分，避免初始状态下总分空白。
4. 事件优化：同时监听input和change事件，实时响应输入变化（比如键盘输入时立即更新）。
5. 格式统一：用toFixed(1)保留一位小数，和成绩的10.0格式匹配。

内容的提问来源于stack exchange，提问作者Mary4bills