添加多个动态行后，添加动态行的值不起作用

Question

我创建了一个动态 table，用户必须在其中输入学生姓名及其主题和分数。每个学生可以包含多个科目。我附上下面的代码，这样会更容易理解。

What is working :

总和对于添加的 1 个学生群体来说工作得很好。

What I need

总和应该为我动态添加的每个学生块相加，并以小计形式显示总计。小计应相加得出总数。

Code

function calculateSum() {
    var sum = 0;
    $(".marks").each(function () {

        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }

    });
    $("#Sub").val(sum.toFixed(2));
    $("#Sub1").val(sum.toFixed(2));
}

function recalc() {
    var tt = 0;
    $("#tb").find('tr').each(function () {
        $(this).find('input.row-total').val(dateTotal ? dateTotal : "");
        tt += isNumber(dateTotal) ? dateTotal : 0;
    }); //END .each
    $("#table-grand-total").html(tt);
}

function calculateTotal() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".row-total").each(function () {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length !== 0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $(".table-total").val(sum.toFixed(2));
}

Answer 1

您的代码存在一些问题：

您在处理动态项目时使用了 ID，请改用 class
table 页脚超出 table 正文
我总是避免在动态 table 中克隆元素，您可以改为创建模板
事件绑定

看我的例子：

$(function() {
  var students = 0;

  function studentTemplate(students) {

    return '<tr class="student_name"> <td colspan="2"><b>Student Name</b></td><td colspan="1"> <input type="text" name="student_names[]" class="form-control" placeholder="Student Name"> </td><th><a style="font-size:18px;width:33%;" class="newstudent" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th> </tr><tr class="student_marks"> <td><b>Subject Name and Marks</b></td><td> <input type="text" name="subnames[]" class="form-control" placeholder="Subject Name"> </td><td> <input type="number" name="marks[]" class="marks student_' + students + ' form-control" student_ref="student_' + students + '" placeholder="Marks"> </td><th><a style="font-size:18px;width:33%;" class="addsubject" ><span class="glyphicon glyphicon-plus"></span></a></th> </tr><tr class="subtotal"> <td colspan="2"><b>Sub - Total</b></td><td> <input type="text" name="subtotals[]" class="row-total student_' + students + ' form-control" disabled> </td></tr>';

  }

  function subTemplate(students) {
    return '<tr class="student_marks"> <td><b>Subject Name and Marks</b></td><td> <input type="text" name="subnames[]" class="form-control" placeholder="Subject Name"> </td><td> <input type="number" name="marks[]" class="marks student_' + students + ' form-control" student_ref="student_' + students + '" placeholder="Marks"> </td><th><a style="font-size:18px;width:33%;" class="addsubject" ><span class="glyphicon glyphicon-plus"></span></a></th> </tr>';

  }

  $('#tb tbody').append(studentTemplate(students));

  $('#tb tbody').on("click", "a.newstudent", function() {
    students++;
    $('#tb tbody').append(studentTemplate(students));
  });

  $('#tb tbody').on("click", "a.addsubject", function() {
    $(this).closest(".student_marks").after(subTemplate(students));
  });

  $('#tb tbody').on("keyup", "input.marks", function() {
    subtotal($(this).attr("student_ref"));
  });

  function subtotal(ref) {
    var sub = 0;
    $(".marks." + ref).each(function() {
      sub += $(this).val() != "" ? parseInt($(this).val()) : 0;
    });
    $(".row-total." + ref).val(sub);
    calcTotal();
  }

  function calcTotal() {
    var total = 0
    $(".row-total").each(function() {
      total += $(this).val() != "" ? parseInt($(this).val()) : 0;
    })

    $('#table-grand-total').val(total);

  }

});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
  <div class="bs-example">
    <div class="Container">
      <table class="table table-hover small-text" style="margin-top: 50px;" id="tb" border="1px">
        <tbody>
        </tbody>
        <tfoot>
          <th colspan="2">GRAND TOTAL</th>
          <td>
            <input type="text" name="GrandTotal[]" id="table-grand-total" class="table-total form-control" disabled>
          </td>
        </tfoot>
      </table>
    </div>
  </div>
</div>

添加多个动态行后，添加动态行的值不起作用

Adding values of dynamic rows not working after multiple dynamic rows are added

html

php

jquery

dynamic-tables