[英]Adding values of dynamic rows not working after multiple dynamic rows are added
I've created a dynamic table where users have to enter the student name and their subject and marks. 我创建了一个动态表,用户必须在其中输入学生姓名及其科目和成绩。 Each student can contain several subjects.
每个学生可以包含几个科目。 I have attached the code below, which would be easier to understand.
我已经附上了下面的代码,这将更容易理解。
Click here to view the working code 点击此处查看工作代码
What is working :
什么工作:
The sum is working perfectly fine for 1 block of students that is added. 这笔总和对于添加的1个学生来说效果很好。
What I need
我需要的
The sum should add for each block of students that I dynamically add and dispaly the totals in sub-total. 总和应该为我动态添加的每个学生块相加,并将总计显示为小计。 The sub-totals should add to give the total.
小计应加起来得出总数。
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));
}
You ve some problems in your code: 您的代码中有一些问题:
look at my example: 看我的例子:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.