I am creating a form where the column and rows should automatically add their data, but I have to generate the name based on DB data and have to use a loop to add details. Adding column is perfect but adding the rows is quite difficult here :)
How can I add rows and column together by one input data? And also add last column total (which is not editable)
Notes: My input rows will be generated using loop function, so if you want to change class-name, id etc, then change inside both table rows.
Sorry for my bad English and thanks in advance, you can find the snippet here below:
$(document).on('input', '.outstanding, .received, .paid', updateSchedule26);
function updateSchedule26() {
var sum = 0, sum2 = 0, sum3 = 0, out, reci, paid;
$('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
out = $(this).val();
sum += parseFloat(this.value);
} else if($(this).hasClass('received')) {
reci = $(this).val();
sum2 += parseFloat(this.value);
} else if($(this).hasClass('paid')) {
paid = $(this).val()
sum3 += parseFloat(this.value);
}
}
});
var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
$(".amtOutstanding").val(parseFloat(total).toFixed(2));
$('#sch26_outstanding').val(sum.toFixed(2));
$('#sch26_received').val(sum2.toFixed(2));
$('#sch26_paid').val(sum3.toFixed(2));
$('#sch26_amtOutstanding').val($(".amtOutstanding").val());
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table table-sm">
<thead>
<tr>
<th style="width:16.67%">Name</th>
<th style="width:16.67%">Outstanding(+)</th>
<th style="width:16.67%">Received(-)</th>
<th style="width:16.67%">Paid(=)</th>
<th style="width:16.67%">Sub Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Name 2</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Add Total</td>
<td><input type="number" name="" id="sch26_outstanding" class="form-control" readonly></td>
<td><input type="number" name="" id="sch26_received" class="form-control" readonly></td>
<td><input type="number" name="" id="sch26_paid" class="form-control" readonly></td>
<td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
</tr>
</tbody>
</table>
I guess you can update rows and columns separate, like this:
$(document).on('input', '.outstanding, .received, .paid', updateTable);
function updateTable() {
updateRow($(this).closest("tr"));
updateCol($(this).closest("td"), $(this));
updateTotal($(this.closest("table")));
}
function updateRow($row) {
var sum = 0,
sum2 = 0,
sum3 = 0;
$row.find('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
out = $(this).val();
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
reci = $(this).val();
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
paid = $(this).val()
sum3 += parseFloat(this.value);
}
}
});
$row.find('.amtOutstanding').val(sum + sum2 + sum3);
}
function updateCol($col, $input) {
var index = $col.index() + 1;
var sum = 0;
$col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
sum += parseFloat(this.value);
}
});
if ($input.hasClass('outstanding')) {
$('#sch26_outstanding').val(sum.toFixed(2));
} else if ($input.hasClass('received')) {
$('#sch26_received').val(sum.toFixed(2));
} else if ($input.hasClass('paid')) {
$('#sch26_paid').val(sum.toFixed(2));
} else if ($input.hasClass('amtOutstanding')) {
$('#sch26_amtOutstanding').val(sum.toFixed(2));
}
}
function updateSchedule26() {
var sum = 0,
sum2 = 0,
sum3 = 0,
out, reci, paid;
$('.outstanding, .received, .paid').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
if ($(this).hasClass('outstanding')) {
out = $(this).val();
sum += parseFloat(this.value);
} else if ($(this).hasClass('received')) {
reci = $(this).val();
sum2 += parseFloat(this.value);
} else if ($(this).hasClass('paid')) {
paid = $(this).val()
sum3 += parseFloat(this.value);
}
}
});
var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
$(".amtOutstanding").val(parseFloat(total).toFixed(2));
$('#sch26_outstanding').val(sum.toFixed(2));
$('#sch26_received').val(sum2.toFixed(2));
$('#sch26_paid').val(sum3.toFixed(2));
}
function updateTotal($table) {
var sum = 0;
$table.find('.amtOutstanding').each(function(i) {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$('#sch26_amtOutstanding').val(sum.toFixed(2))
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table table-sm">
<thead>
<tr>
<th style="width:16.67%">Name</th>
<th style="width:16.67%">Outstanding(+)</th>
<th style="width:16.67%">Received(-)</th>
<th style="width:16.67%">Paid(=)</th>
<th style="width:16.67%">Sub Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Name 2</td>
<td><input type="number" name="" id="" class="form-control outstanding"></td>
<td><input type="number" name="" id="" class="form-control received"></td>
<td><input type="number" name="" id="" class="form-control paid"></td>
<td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
</tr>
<tr>
<td>Add Total</td>
<td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
<td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
</tr>
</tbody>
</table>
