Добавление значений динамических строк не работает после добавления нескольких динамических строк
Я создал динамическую таблицу, в которой пользователи должны вводить имя ученика, его предмет и оценки. Каждый студент может содержать несколько предметов. Я приложил код ниже, который будет легче понять.
Нажмите здесь, чтобы посмотреть рабочий код
Что работает:
Сумма отлично работает на 1 блок студентов, который добавляется.
Что мне нужно
Сумма должна прибавляться к каждому блоку студентов, которые я динамически добавляю, и отображать итоги в промежуточных итогах.
Промежуточные итоги должны добавить, чтобы дать общее количество.
Код
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));
}
Решение
У вас есть некоторые проблемы в вашем коде:
- Вы используете идентификаторы при работе с динамическими элементами, вместо этого используйте класс
- нижний колонтитул выходит за пределы тела таблицы
- я всегда избегаю клонирования элементов в динамических таблицах, вместо этого вы можете создавать тамплаты
- привязки событий
посмотрите на мой пример:
$(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>Другие решения
Других решений пока нет …
detector