Баллы студентов, суммирующих на общем счете одного студента

Question

В моем школьном веб-приложении есть раздел, позволяющий мне добавлять баллы сразу всем ученикам определенного класса c. Недавно я добавил несколько кодов, которые автоматически вычисляют сумму входных значений с помощью javascript.

. Отлично работает. Проблема в том, что баллы всех учеников складываются как один к одному ученику наверху.

См. Изображение ниже

Я хочу, чтобы у каждого учащегося был свой общий балл.

<?php }elseif($class_id >= 15 && $class_id <= 17){ ?>
<form action="<?php echo site_url('admin/mtprimary/assigngradeActionMT') ?>" method="POST" id="formSubjectTeacher">
<?php echo $this->customlib->getCSRF(); ?>
<div class="row">
<div class="col-lg-3">
<input type="hidden" name="class" value="<?php echo $class_id; ?>">
<input type="hidden" name="subject_id" value="<?php echo $subject_id; ?>">
</div>
<div class="col-lg-4">                                       
<h4><strong><?php echo $session_name; ?></strong></h4>
</div>
</div>
<br>
<hr>

<?php foreach($students as $student){?>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]"  value="">
<input type="hidden" name="section_id"  value="<?php echo $section_id; ?>">
<input type="hidden" name="session_id[]"  value="<?php echo $student->session_id; ?>">
<input type="hidden" name="student_id[]"  value="<?php echo $student->student_id; ?>">
<input type="hidden" name="class_id[]" value="<?php echo $class_id; ?>">
<input type="text" value="<?php echo $CI->GetStudentNameWithID($student->student_id); ?>" class="form-control "  readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
input type="number" name="mt_ca1[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output id="result"></output>
</div>
</div>

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

$inputs.change(function() {
  var total = 0;
  $inputs.each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

</script>

Answer 1

Как уже указывалось, у вас есть несколько элементов с id, равным result, что недопустимо, вместо этого следует использовать класс result. Но ваша главная проблема заключается в том, что вам нужно квалифицировать входные данные, которые вы суммируете, чтобы получить общий балл за студента. Вы можете сделать это, найдя родительский div с классом row для входных данных, которые изменяются, а затем только суммируйте входные данные, являющиеся дочерними элементами этого div. Затем вы можете сохранить итоговое значение в выводе result, который является потомком этого div:

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="1">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Bill" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="2">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Mary" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>

Answer 2

Атрибут id должен быть уникальным в документе, вместо этого используйте class. Сначала измените HTML с классом.

С

<output id="result"></output>

На

<output class="result"></output>

В jQuery Измените

$('#result').html(total);

На

$(this).parent().next().find('.result').text(total);

Обратите внимание: Рекомендуется использовать text() вместо html(), если текст представляет собой простую строку (не htmlString ).

Я также предпочитаю событие input вместо change для вывода немедленных изменений путем изменения

$inputs.change(function() {

на

$inputs.on('input', function() {