how to get single data value from Multiple data using jquery - javascript

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>

Related

JavaScript add more var not working on onkeyup

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();
});

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 find the row that has certain class name in jquery?

I have a table which has hundreds of items listed like below.
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td><</tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td><</tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td><</tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td><</tr>
<tr class="discount" id="trline05"><td>5</td>
<td><input type="text" class="ordItem" id="oline05" value="10"
readonly="readonly" /></td><</tr>
....
I am trying to skip the "outofstock" row with the following each statement
$.each($('.ordItem'), function() {
if ( !$(this).hasClass(outofstock)) {
data[$(this).data('code')] = $(this).val();
}
});
how to tr row and skip that row?

So select the available rows and than select the input.
$('tr.available .ordItem').each()
$('tr.available .ordItem').each( function(){
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td></tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td></tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td></tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td></tr>
</table>
and since you did not give all the details up front, you can use not() to remove the outofstock rows
$('tr:not(.outofstock) .ordItem').each( function(){
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="available" id="trline01"><td>1</td>
<td><input type="text" class="ordItem" id="oline01" value="100"
readonly="readonly" /></td></tr>
<tr class="available" id="trline02"><td>2</td>
<td><input type="text" class="ordItem" id="oline02" value="20"
readonly="readonly" /></td></tr>
<tr class="outofstock" id="trline03"><td>3</td>
<td><input type="text" class="ordItem" id="oline03" value="0"
readonly="readonly" /></td></tr>
<tr class="available" id="trline04"><td>4</td>
<td><input type="text" class="ordItem" id="oline04" value="20"
readonly="readonly" /></td></tr>
</table>

$.each($('.available .ordItem'), function(index, item) {
console.log(item);
})
This will console all the inputs with the class '.ordItem' that are children of rows with the class '.avaliable'

You can use the following code to retrieve any element with whatever class is assigned to it.
$(".your-class-name")
and save it in a variable if you need to.
let someElement = $(".your-class-name")

Summation using for loop

I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/

You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>

Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});

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