JavaScript add more var not working on onkeyup - javascript

I want to create a quality control table using javascript, but when I add more than two variables everything stops working, even though I need 20 sequences in the table.
For now, I'm trying with javascript, maybe you can help with other alternatives like using JQuery
JavaScript I use:
function testfunction(){
var arr = document.getElementsByName('hp');
var arr2 = document.getElementsByName('sd-sum');
var v1 = document.getElementById("v_1").value;
var v2 = document.getElementById("v_2").value;
/**
* I want to add more
* var v3 = document.getElementById("v_3").value;
* var v4 = document.getElementById("v_4").value;
* ............
* up to 20
*/
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
var tot_sd=0;
for(var i=0;i<arr2.length;i++){
if(parseInt(arr2[i].value))
tot_sd += parseInt(arr2[i].value);
}
tot_ = document.getElementById('tot_result');
tot_sdsum = document.getElementById('tot_sd');
mean_ = document.getElementById('mean');
sd_ = document.getElementById('SD');
cv_ = document.getElementById('CV');
mean_all = tot / 20;
x1_v = mean_all - v1;
x2_v = mean_all - v2;
y1_x = Math.pow(x1_v,2).toFixed(2);
y2_x = Math.pow(x2_v,2).toFixed(2);
/**
* I want to add more
* x3_v = mean_all - v3;
* x4_v = mean_all - v4;
* ............
* up to 20
*/
tot_.innerHTML = tot;
mean_.value = mean_all;
document.getElementById("x_1").value = x1_v;
document.getElementById("x_2").value = x2_v;
document.getElementById("y_1").value = y1_x;
document.getElementById("y_2").value = y2_x;
/**
* I want to add more
* document.getElementById("x_3").value = x3_v;
* document.getElementById("x_4").value = x4_v;
* ............
* up to 20
*/
tot_sdsum.innerHTML = tot_sd;
sd_cal = (tot_sd / 19).toFixed(2);
sd_.value = sd_cal ;
cv_.value =(sd_cal / mean_all * 100).toFixed(2);
};
document.addEventListener("DOMContentLoaded", function(event) {
testfunction();
});
and HTML
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Test</th>
<th scope="col">X̄-X</th>
<th scope="col">(X̄-X)<sup>2</sup></th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><input type="number" id="v_1" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_1" class="form-control"></td>
<td><input type="number" id="y_1" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>2</th>
<td><input type="number" id="v_2" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_2" class="form-control"></td>
<td><input type="number" id="y_2" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>3</th>
<td><input type="number" id="v_4" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_4" class="form-control"></td>
<td><input type="number" id="y_4" class="form-control" name="sd-sum"></td>
</tr>
<!-- * I want to add more .... up to 20 -->
<tr>
<th>n = 20</th>
<td>Σ <span id="tot_result"></span></td>
<td>-</td>
<td>Σ <span id="tot_sd"></span></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<th>Mean</th>
<td><input type="number" id="mean" class="form-control"></td>
</tr>
<tr>
<th>SD</th>
<td><input type="number" id="SD" class="form-control"></td>
</tr>
<tr>
<th>CV</th>
<td><input type="number" id="CV" class="form-control"></td>
</tr>
</tbody>
</table>
Any help would be appreciated.

Instead of storing values in individual variables you can use array.
I have created a JSFiddle for your reference : https://jsfiddle.net/dt1m9oc8/19/
HTML:
<html>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Test</th>
<th scope="col">X̄-X</th>
<th scope="col">(X̄-X)<sup>2</sup></th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><input type="number" id="v_1" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_1" class="form-control"></td>
<td><input type="number" id="y_1" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>2</th>
<td><input type="number" id="v_2" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_2" class="form-control"></td>
<td><input type="number" id="y_2" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>3</th>
<td><input type="number" id="v_3" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_3" class="form-control"></td>
<td><input type="number" id="y_3" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>4</th>
<td><input type="number" id="v_4" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_4" class="form-control"></td>
<td><input type="number" id="y_4" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>5</th>
<td><input type="number" id="v_5" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_5" class="form-control"></td>
<td><input type="number" id="y_5" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>6</th>
<td><input type="number" id="v_6" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_6" class="form-control"></td>
<td><input type="number" id="y_6" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>7</th>
<td><input type="number" id="v_7" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_7" class="form-control"></td>
<td><input type="number" id="y_7" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>8</th>
<td><input type="number" id="v_8" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_8" class="form-control"></td>
<td><input type="number" id="y_8" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>9</th>
<td><input type="number" id="v_9" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_9" class="form-control"></td>
<td><input type="number" id="y_9" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>10</th>
<td><input type="number" id="v_10" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_10" class="form-control"></td>
<td><input type="number" id="y_10" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>11</th>
<td><input type="number" id="v_11" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_11" class="form-control"></td>
<td><input type="number" id="y_11" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>12</th>
<td><input type="number" id="v_12" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_12" class="form-control"></td>
<td><input type="number" id="y_12" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>13</th>
<td><input type="number" id="v_13" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_13" class="form-control"></td>
<td><input type="number" id="y_13" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>14</th>
<td><input type="number" id="v_14" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_14" class="form-control"></td>
<td><input type="number" id="y_14" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>15</th>
<td><input type="number" id="v_15" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_15" class="form-control"></td>
<td><input type="number" id="y_15" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>16</th>
<td><input type="number" id="v_16" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_16" class="form-control"></td>
<td><input type="number" id="y_16" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>17</th>
<td><input type="number" id="v_17" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_17" class="form-control"></td>
<td><input type="number" id="y_17" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>18</th>
<td><input type="number" id="v_18" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_18" class="form-control"></td>
<td><input type="number" id="y_18" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>19</th>
<td><input type="number" id="v_19" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_19" class="form-control"></td>
<td><input type="number" id="y_19" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>20</th>
<td><input type="number" id="v_20" class="form-control fee" name="hp" onkeyup="testfunction()"></td>
<td><input type="number" id="x_20" class="form-control"></td>
<td><input type="number" id="y_20" class="form-control" name="sd-sum"></td>
</tr>
<tr>
<th>n = 20</th>
<td>Σ <span id="tot_result"></span></td>
<td>-</td>
<td>Σ <span id="tot_sd"></span></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<th>Mean</th>
<td><input type="number" id="mean" class="form-control"></td>
</tr>
<tr>
<th>SD</th>
<td><input type="number" id="SD" class="form-control"></td>
</tr>
<tr>
<th>CV</th>
<td><input type="number" id="CV" class="form-control"></td>
</tr>
</tbody>
</table>
</body>
</html>
JS:
function testfunction(){
let noOfRows = 20
var arr = document.getElementsByName('hp');
var arr2 = document.getElementsByName('sd-sum');
let v_values = []
for(let i=1;i<=noOfRows;i++){
v_values[i] = document.getElementById(`v_${i}`).value;
}
let tot=0;
for(var i=1;i<v_values.length;i++){
if(parseInt(v_values[i]))
tot += parseInt(v_values[i]);
}
var tot_sd=0;
for(var i=0;i<arr2.length;i++){
if(parseInt(arr2[i].value))
tot_sd += parseInt(arr2[i].value);
}
tot_ = document.getElementById('tot_result');
tot_sdsum = document.getElementById('tot_sd');
mean_ = document.getElementById('mean');
sd_ = document.getElementById('SD');
cv_ = document.getElementById('CV');
mean_all = tot / noOfRows
let x_v_values = []
for(let i=1;i<=noOfRows;i++){
x_v_values[i] = mean_all - v_values[i]
}
let y_x_values = []
for(let i=1;i<=noOfRows;i++){
y_x_values[i] = Math.pow(x_v_values[i],2).toFixed(2);
}
tot_.innerHTML = tot;
mean_.value = mean_all;
for(let i=1;i<=noOfRows;i++){
document.getElementById(`x_${i}`).value = x_v_values[i];
document.getElementById(`y_${i}`).value = y_x_values[i];
}
tot_sdsum.innerHTML = tot_sd;
sd_cal = (tot_sd / 19).toFixed(2);
sd_.value = sd_cal ;
cv_.value =(sd_cal / mean_all * 100).toFixed(2);
};
document.addEventListener("DOMContentLoaded", function(event) {
testfunction();
});

Related

Why aren't these HTML table's fields calculating on load?

How can I make sure that the second part of function runs, calculating the columns and showing the result at the end of each row?
function sum_row_qty(el, poOrigin) {
let rowTotal = 0
if (el) {
let parent = el.closest("tr")
parent.querySelectorAll('.size_qty').forEach(function(e) {
rowTotal += parseFloat(e.value);
})
if (rowTotal) {
parent.querySelector('.qty').value = rowTotal;
}
} else {
document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
}
}
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%; text-align: left">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">Total</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
</tbody>
</table>
Here is the answer proposed by a gentleman on another platform:
function sumInputs(row) {
const inputsArr = [...row.querySelectorAll('.size_qty')];
return inputsArr.reduce((total, {
value
}) => total += parseFloat(value), 0);
}
function sum_row_qty(el) {
if (el) {
const currentRow = el.closest("tr");
currentRow.querySelector('.qty').value = sumInputs(currentRow);
}
}
tableRows.querySelectorAll('tr').forEach(row => {
row.querySelector('.qty').value = sumInputs(row);
});
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%; text-align: left">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">Total</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
<tr>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
<td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this);"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
</tr>
</tbody>
</table>

How to focus on next row input in the same column by hitting enter key

I am saving Paper result I want to save it fast like we do in ms excel by pressing enter key do focus
on next bottom cell
<tr>
<td>1</td>
<td>Muhammad Umar Abdur Rahman</td>
<td>
<input type="text" value="0" name="ReadingMarks257" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="WritingMarks257" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="PaperMarks257" onkeydown="Next(event)" class="input">
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td>
<input type="text" value="0" name="ReadingMarks258" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="WritingMarks258" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="PaperMarks258" onkeydown="Next(event)" class="input">
</td>
</tr>
I have already tried
function Next(e) {
if (e.which === 13) {
var Element = $(this).closest('tr').next().find('.input');
Element.focus();
} else {
$("#Msg").html('another Pressed');
}
}
You can use nextElementSibling.focus():
function Next(e) {
if (e.which === 13) {
e.target.nextElementSibling.focus();
}
else {
$("#Msg").html('another Pressed');
}
}
Hey #NibrasAffairs use :first selector.
$('.input').keydown(function (e) {
if (e.which === 13) {
$(this).closest('tr').next().find('input[type=text]:first').focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="half">
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
</table>

Javascript calculated field disappearing when being submitted to mysql

I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ

how to get single data value from Multiple data using jquery

I am stuck at jQuery Problem. i think i am going wrong in this code. please help.
I'm trying to get value of input box by clicking update button. but everytime i get only first number.
I want text value according update button.
$(".update").click(function(){
qty = $(".qty").val();
alert(qty);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="qty" value="5" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="20" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="30" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="50" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="45" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="15" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="70" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
</table>
You have to "link" your update button whith the input ".qty" you want to associate to
$(".update").click(function(){
qty = $(this).closest("tr").find(".qty").val();
alert(qty);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="qty" value="5" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="20" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="30" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="50" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="45" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="15" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="70" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
</table>
change the qty variable as below:
var thisObj = $(this);
qty = $(thisObj).parent().parent().find("input").val();
$(".update").click(function(){
qty = $(".qty").val();
alert(qty);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="qty" value="5" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="20" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="30" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="50" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="45" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="15" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
<tr>
<td><input type="text" name="qty" value="70" class="qty" id="qty"/></td>
<td><button class="update">↻</button></td>
</tr>
</table>

Jquery Sum by Group from Table/Input Data

I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>
First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.

Categories