Sum values from column in table
Question
I've created a website using Google Apps Script.
In this website, I have a table with 4 columns (Item, Price, Quantity & Total) Once you enter the quantity for the item, column 4 will automatically compute the total.
What I need is to have the sum of all the values from column 4. Which will be displayed to "Total" below the table.
How can I do it? thank you.
This is my code:
function sumAll() { jQuery.each( $('.total'), function( index, textFeild) { var value = parseInt($(textFeild).val()); if(isNaN(value) == false) { total = total+ value; } }); } calc_total(); $(".qty").on('input', function(){ var parent = $(this).closest('tr'); var price = parseFloat($('.totals',parent).text()); var choose = parseFloat($('.qty',parent).val()); $('.sum',parent).text(choose+price); calc_total(); }); function calc_total(){ var sum = 0; $(".totals").each(function(){ sum += parseFloat($(this).text()); }); $('#sum').text(sum); } const myTable = document.querySelector('#myTableID') myTable.oninput = e => { let rowIndex = e.target.parentNode.parentNode.rowIndex, Qte = getInput_N_RowCell(rowIndex,0), Rate = getInput_N_RowCell(rowIndex,1) setInput_RowCell(rowIndex,2, (Qte * Rate) ) console.log('sum=', Sum_RowInputValues(rowIndex) ) } function getInput_N_RowCell(xRow, xCell) { return Number(myTable.rows[xRow].cells[xCell].querySelector('input').value) || 0 } function setInput_RowCell(xRow, xCell, value) { myTable.rows[xRow].cells[xCell].querySelector('input').value = value } function myFunction() { var val = Math.floor(1000 + Math.random() * 9000); document.getElementById("demo").innerHTML = "Order # " + val; } h1{ background: -webkit-linear-gradient(#FFC0CB, #FF1493); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h3{ text-transform: uppercase; background: -webkit-linear-gradient(#FFC0CB, #FF1493); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } * { box-sizing: border-box; }.column { margin-left:5%; float: left; width: 20%; }.row:after { content: ""; display: table; clear: both; } h4{ margin-left: 2%; color: #008B8B; font-weight: 900; text-transform: uppercase; } h5{ color: red; text-transform: uppercase; font-weight: 900; } h1{ color: #FFC0CB; text-transform: uppercase; font-weight: 900; }.button { background-color: #FF69B4; /* Green */ border: none; color: white; padding: 8px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 10px; margin: 4px 2px; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 4px #999; }.button1:hover {background-color: #FFC0CB}.button:active { box-shadow: 0 5px #666; transform: translateY(4px); }.button1 { margin-left: 3%; border-radius: 12px; background-color: white; color: black; border: 2px solid #FF69B4; } th { text-align: center; } td { text-align: right; } th, td { border-bottom: 1px solid #ddd; } tr:hover {background-color: #f5f5f5;}
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js"></script> </head> <body> <h1 style="margin-left;6%:">THE MILK TEA CLUB</h1> <br> <table id='myTableID0'style="display; inline-block: float; left: font-size; 18px: padding-left; 19px:"> <thead> <tr> <th>Item</th> </tr> </thead> <tbody> <tr style="background-color; #fff0f8:"> <td>Classic</td> </tr> <tr style="background-color; #fff0f8:"> <td>Wintermelon</td> </tr> <tr style="background-color; #fff0f8:"> <td>Chocolate</td> </tr> <tr style="background-color; #f2f2f2:"> <td>Classic with Pearl</td> </tr> <tr style="background-color; #f2f2f2:"> <td>Wintermelon with Pearl</td> </tr> <tr style="background-color; #f2f2f2:"> <td>Chocolate with Pearl</td> </tr> <tr style="background-color; #fff0f8:"> <td>Classic with Crystal</td> </tr> <tr style="background-color; #fff0f8:"> <td>Wintermelon with Crystal</td> </tr> <tr style="background-color; #fff0f8:"> <td>Chocolate with Crystal</td> </tr> </tbody> </table> <table id='myTableID'style="display; inline-block: font-size; 15px: padding-left; 5px:"> <thead> <tr> <th style='font-size; 18px:'>Rate</th> <th style='font-size; 18px:'>Quantity</th> <th style='font-size; 18px:'>Total</th> </tr> </thead> <tbody> <tr style="background-color; #fff0f8:"> <td><input id="rate" value='75' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #fff0f8:"> <td><input id="rate" value='75' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #fff0f8:"> <td><input id="rate" value='75' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #f2f2f2:"> <td><input id="rate" value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #f2f2f2:"> <td><input id="rate" value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #f2f2f2:"> <td><input id="rate" value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #fff0f8:"> <td><input id="rate" value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #fff0f8:"> <td><input id="rate"value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr style="background-color; #fff0f8:"> <td><input id="rate" value='85' size='5' style='text-align;center: font-size; 14px:' disabled></td> <td><input id="qty" type='text' size='5' style='text-align;center: font-size; 14px:'></td> <td><input id='totals' class='total' type='text' size='5' style='text-align;center: font-size; 14px:' readonly disabled></td> </tr> <tr> <th colspan="2" style="text-align:right">Total:</th> <th colspan="2" style="text-align:center"><span id="sum"></span></th> </tr> </tbody> </table><br> <div class="row"> <div class="column"> <h3><b>Order Logs</b></h3> <button class="button button1" onclick="myFunction()"> Get Order </button><button class="button button1" onlick="sumAll()"> Record Order </button> <h2 id="demo"></h2><!-- ORDER NUMBER --> </div> </div> </body> </html>
1 answers
solution1
1 2020-06-20 13:40:56
Always avoid assigning same id to multiple elements. You can assign a placeholder class to each totals input. For eg.
<input id='totals' class='total' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled>
Then you can loop through those inputs with class total using jQuery class selector and each function inside your sumAll() function.
Updated code
jQuery.each( $('.total'), function( index, textFeild) {
var value = parseInt($(textFeild).val());
if(isNaN(value) == false) {
total = total+ value;
}
});
Always check if the value is number.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Sum column values in table
Sum up the values in the table column
Trying to sum the values of a dynamic HTML table column
How to sum values in a column of a bootstrap table?
Total sum of html table column values(dynamic)
Sum of values in a table column with different currency symbol
How to sum values from table column and update when remove/add new row
Echo sum from a table column using php
How to sum the value from a column dynamic table
sum all values for table column based on class and show in textbox
Related Tags