How to sum dynamically added column values?
EDIT: I'm sorry Joe, it looks like I attached your fiddle to the link other than my updated copy. Please check the link out again.
I've created a JSfiddle using yours for a working example.
I modified your code to make it easier by adding an attribute on your debit input of data-action="sumDebit" and added in this snippet.
$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
var total = 0;
$('[data-action="sumDebit"]').each(function(i,e) { //Get all tags with [data-action="sumDebit"]
var val = parseFloat(e.value); //Get int value from string
if(!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
total += val;
});
$('#totaldbt').val(total); //Update value to total
});
Dynamic column sum total when adding a row with JS
There is no point relying on ids when you are inserting an unlimited amount of elements.
In solution below I added data-col attribute on every input in the tbody so I could easily find a column it belongs to. After that I'm looping over every input, in the column that triggered the event, to calculate the total. In the end I'm updating the value of input in tfoot in the same column.
const $tableID = $("#table");
const newTr = `
<tbody>
<tr class="border-bottom-1">
<td class="pt-3-half colonne" contenteditable="true" placeholder="Nouvelle ligne"><i class="fas fa-plus text-success" aria-hidden="true"></i></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value1" value="0" placeholder="0" data-col="1" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value8" value="0" placeholder="0" data-col="2" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value15" value="0" placeholder="0" data-col="3" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value22" value="0" placeholder="0" data-col="4" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value29" value="0" placeholder="0" data-col="5" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td><span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span></td>
</tr>
</tbody>`;
// Add/clone, new column (on click) without showing my first clonable row.
$(".table-add").on("click", "i", () => {
const $clone = newTr;
if ($tableID.find("tbody tr").length === 0) {
$("tbody").append(newTr);
}
$tableID.find("table").prepend($clone);
});
$tableID.on("click", ".table-remove", function() {
$(this).parents("tr").detach();
});
// Sum of the column where the event was triggerred
$tableID.on("input", (event) => {
// Getting index of the column
const colNum = +event.target.dataset.col;
let total = 0;
// Looping over every row
$("tbody tr").each((i, tr) => {
total += +$(tr)
.find("input")
// Getting only the input in the same column as the triggered one
.eq(colNum - 1)
.val();
});
$("tfoot input")
.eq(colNum - 1)
.val(total);
});<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Editable table -->
<div class="card shadow-none border-top-0" style="border-color: #a8b698; background-color: #fff;">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4" style="background-color: #fff; border-color: #fff;">
Table de données
</h3>
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
<a
href="#!"
class="text-success material-tooltip-main"
data-toggle="tooltip"
data-placement="right"
title="Ajouter une ligne"
><i class="fas fa-plus fa-2x" aria-hidden="true"></i
></a>
</span>
<table id="example" class="table table-responsive-md text-center">
<thead>
<!-- TITLES OF COLUMNS -->
<tr class="mescouilles">
<th class="text-center" contenteditable="false">Grade</th>
<th class="text-center" contenteditable="true">EFF THEO</th>
<th class="text-center" contenteditable="true">ABS</th>
<th class="text-center" contenteditable="true">PRESENT</th>
<th class="text-center" contenteditable="true">INDISPONIBLE</th>
<th class="text-center" contenteditable="true">SLR</th>
<th class="text-center" contenteditable="false">SUPPRIMER</th>
</tr>
</thead>
<tbody>
<!-- OFF ROW -->
<tr class="cucul">
<td class="pt-3-half colonne" contenteditable="true">Off</td>
<td class="pt-3-half" contenteditable="true">
<input id="value2" type="number" name="value2" value="0" placeholder="0" data-col="1" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value9" type="number" name="value9" value="0" placeholder="0" data-col="2" class="form-control form-control-sm border border-0 text-center colonneDeux" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value16" type="number" name="value16" value="0" placeholder="0" data-col="3" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value23" type="number" name="value23" value="0" placeholder="0" data-col="4" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value30" type="number" name="value30" value="0" placeholder="0" data-col="5" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td>
<span class="table-remove"><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- S/OFF ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">S/OFF</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value3"
type="number"
name="value3"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value10"
type="number"
name="value10"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center colonneDeux"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value17"
type="number"
name="value17"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value24"
type="number"
name="value24"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value31"
type="number"
name="value31"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- CCH ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="flase">CCH</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value4"
type="number"
name="value4"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value11"
type="number"
name="value11"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value18"
type="number"
name="value18"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value25"
type="number"
name="value25"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value32"
type="number"
name="value32"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- CPL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">CPL</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value5"
type="number"
name="value5"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value12"
type="number"
name="value12"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value19"
type="number"
name="value19"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value26"
type="number"
name="value26"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value33"
type="number"
name="value33"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- ICL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">ICL</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value6"
type="number"
name="value6"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value13"
type="number"
name="value13"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value20"
type="number"
name="value20"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value27"
type="number"
name="value27"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value34"
type="number"
name="value34"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- LEG ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">LEG</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value7"
type="number"
name="value7"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value14"
type="number"
name="value14"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value21"
type="number"
name="value21"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value28"
type="number"
name="value28"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value35"
type="number"
name="value35"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0 shadow-none"
>
SUPPRIMER
</button></span
>
</td>
</tr>
</tbody>
<tfoot>
<!-- TOTAL OF COLUMNS -->
<tr style="background-color: #c5d3b6; border-width: 3px;">
<td class="pt-3-half colonne" contenteditable="false">TOTAL</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum"
type="number"
name="sum"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum2"
type="number"
name="sum2"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum3"
type="number"
name="sum3"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum4"
type="number"
name="sum4"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td contenteditable="false">
<input
disabled="disabled"
id="sum5"
type="number"
name="sum5"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- Editable table -->
<script src="./src/index.js"></script>
</body>calculate the sum of the column from dynamically created rows in jquery
you don't call your function to calc total, to fix this, call your calculateSubTotal() function inside getTotalCost or anywhere you need, for example:
var rowCount = 1; $('#add').click(function() { rowCount++; $('#orders').append('<tr id="row'+rowCount+'"><td><input class="form-control product_price" type="number" data-type="product_price" id="product_price_'+rowCount+'" name="product_price[]" for="'+rowCount+'"/></td><input class="form-control" type="hidden" data-type="product_id" id="product_id_'+rowCount+'" name="product_id[]" for="'+rowCount+'"/><td><input class="form-control quantity" type="number" class="quantity" id="quantity_'+rowCount+'" name="quantity[]" for="'+rowCount+'"/> </td><td><input class="form-control total_cost" type="text" id="total_cost_'+rowCount+'" name="total_cost[]" for="'+rowCount+'" readonly/> </td><td><button type="button" name="remove" id="'+rowCount+'" class="btn btn-danger btn_remove cicle">-</button></td></tr>');});
// Add a generic event listener for any change on quantity or price classed inputs$("#orders").on('input', 'input.quantity,input.product_price', function() { getTotalCost($(this).attr("for"));});
$(document).on('click', '.btn_remove', function() { var button_id = $(this).attr('id'); $('#row'+button_id+'').remove();});
// Using a new index rather than your global variable ifunction getTotalCost(ind) { var qty = $('#quantity_'+ind).val(); var price = $('#product_price_'+ind).val(); var totNumber = (qty * price); var tot = totNumber.toFixed(2); $('#total_cost_'+ind).val(tot); calculateSubTotal();}
function calculateSubTotal() { var subtotal = 0; $('.total_cost').each(function() { subtotal += parseFloat($(this).val()); }); $('#subtotal').val(subtotal);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head>
<body> <div class="col-md-12"> <div class="line line-dashed line-lg pull-in"></div> <div class="row"> <table class="table table-bordered" id="orders"> <tr> <th>Price</th> <th>Quantity</th> <th>Total Cost</th> <th> </th> </tr> <tr> <td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_1' name='product_price[]' for="1"/></td> <!-- purchase_cost --> <td><input class="form-control quantity" type='number' id='quantity_1' name='quantity[]' for="1"/></td> <td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' readonly/></td> <td><button type="button" name="add" id="add" class="btn btn-success circle">+</button></td> </tr> </table> <input class="form-control" type='hidden' data-type="product_id_1" id='product_id_1' name='product_id[]'/> </div> </div>
<div class="line line-dashed line-lg pull-in" style="clear: both;"></div> <div class="col-md-12 nopadding"> <div class="col-md-4 col-md-offset-4 pull-right nopadding"> <div class="col-md-8 pull-right nopadding"> <div class="form-group"> <td><input class="form-control subtotal" type='text' id='subtotal' name='subtotal' readonly/></td> </div> </div> <div class="col-md-3 pull-right"> <div class="form-group"> <label>Subtotal</label> </div> </div> </div> </div></body></html>Total sum of dynamic table
Here is one possible down and dirty solution
I modified the functions and it seems to work for me now.
$(document).ready(function() { //this is added just to pre-populate some rows addRow2('dataTable'); addRow2('dataTable'); addRow2('dataTable'); addRow2('dataTable');
$(".chkall").click(function() { if ($(".chkall").is(':checked')) { $("#dataT
Related Topics
How to Change Background Opacity When Bootstrap Modal Is Open
Javascript - Remove Milliseconds from Date Object
Jquery Click Events Firing Multiple Times
Use Localstorage Variables in PHP
How to Reload Datatable by Ajax (Jquery)
How to Completely Remove Ionic and Cordova Installation from Mac
Css Div Height Not Expanding to Fit Content or Wrapping Content
How to Format a Float as Integer When .Tofixed(2) Gives Zeros After the Decimal Point
Window.Opener | Not Working in Chrome
How to Get Convert an Object to HTML Markup
Use Lodash to Find Objects in an Array Matches an Id (Complex, Drilldown)
Show Only a Limited Number of Rows in a Table
How to Close an Open Collapsed Navbar When Clicking Outside of the Navbar Element in Bootstrap 3
Error Ts2739: Type '{}' Is Missing the Following Properties from Type
How to Prevent Invalid Characters from Being Typed into Input Fields
React Hooks Error: Hooks Can Only Be Called Inside the Body of a Function Component