How to calculate sum of all rows with jQuery? [duplicate] - php

Question

This question already has answers here:
jQuery sum rows adding all cells
(3 answers)
Closed 5 years ago.
Below is my table code with Add New button. Onclick Add New
button new row will create. In picture you can see this. User will
input debit and credit values at the end all debit values should be
calculate and sum should be display and same for the credit value. I
am using jQuery to create new row:
Jquery code:
<script type="text/javascript">
$("#add, .check ").click(function() {
$('#datatable-buttons tbody>tr:last')
.clone(true)
.insertAfter('#datatable-buttons tbody>tr:last').find('input').each(function(){
$(this).val('');
});
});
</script>
Html table code:
<table id="datatable-buttons" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th>
<input type="checkbox" id="check-all" class="flat">
</th>
<th class="column-title">Account</th>
<th class="column-title">Debits</th>
<th class="column-title">Credits</th>
<th class="column-title">Description</th>
<th class="column-title">Name</th>
<th class="column-title no-link last"><span class="nobr">Action</span>
</th>
<th class="bulk-actions" colspan="7">
<a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center ">
<input type="checkbox" class="flat" name="table_records">
</td>
<td class=" "><select class="form-control" name="journalname">
<option>Choose option</option>
<?php
$sql = mysqli_query($conn,'SELECT * FROM `chartofaccounts`');
while ($row1 = mysqli_fetch_array($sql))
{?>
<option value="<?php echo $row1["name"];?>"><?php echo $row1["name"];?></option>
<?php }?>
</select></td>
<td class=""><input class="form-control" type="text" name="debit" ></td>
<td class=" "><input class="form-control" type="text" name="credit"></td>
<td class=" "><input class="form-control" type="text" name="descc"></td>
<td class=" "><input class="form-control" type="text" name="name"></td>
<td class=" last">View
</td>
</tr>
</tbody>
</table>
<button type="button" id="add">Add New</button>
Below image will give you clear understanding:

Answer 1

made you a simple example of how to calculate the sum from the input fields.
check snippet below or jsFiddle
add numbers to the 3 inputs, and then click on View , it will get the sum of the 3 input values.
var input = $("input"),
button = $("td.last a")
$(button).click(function () {
var sum = 0;
$(input).each(function() {
sum += Number($(this).val());
});
$(this).html(sum)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input>
</td>
<td>
<input>
</td>
<td>
<input>
</td>
<td class=" last">View
</tr>
</table>