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

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

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>

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

How can I query select all inputs from table column

I am trying to get the input from a table form. The table has but 2 columns how can I get the input from these? I want to have a different var for each column of items? Should I use an array? This is my table:
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
<tr>
<th scope="col"></th>
<th scope="col">Hoeveelheid</th>
<th scope="col">Gewicht x KG</th>
</tr>
<tr>
<td>1</td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>2</td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>3</td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
</table>
What is the best way to get around this? I tried to select by tag name.

Here a quick one for jQuery:
Replace tableid with the id of your table
var col1_Array = $('#tableid td:nth-child(1)').map(function(){
return $(this).text();
}).get();
var col2_Array = $('#tableid td:nth-child(2)').map(function(){
return $(this).text();
}).get();

Array sum returns NaN

I have an array with three values, and 1 seperate value all acquired from a form.
I am trying to multiply the top number (3) with the others (12, 3 and 31) and add those up.
This is what i tried:
HTML:
<p>Aantal sets: <span id="dynamicSet"></span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
<tr>
<th scope="col"></th>
<th scope="col">Hoeveelheid</th>
<th scope="col">Gewicht x KG</th>
</tr>
<tr>
<td>1</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>2</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
<tr>
<td>3</td>
<td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
<td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
</tr>
</table>
And my JS:
var HoeveelheidArr=[];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML;
function getData(){
$('#resultTable .HoeveelheidField > input ').each(function() {
HoeveelheidArr.push($(this).val());
});
console.log(HoeveelheidArr);
HoeveelheidArr.forEach(function getReps (value) {
console.log(value);
for(var i = 0; i < HoeveelheidArr.length; i++){
total += value[i] * setAmount;
}
});
console.log(total);
}
However as you may see in the picture i keep getting Not a Number back from the console. Despite the console showing all of them appear as ints? Do you see what I do wrong? I also tried:
parseInt(value[i])

Your setAmount variable is a string from innerHTML.
Use parseInt() on both variables:
total += parseInt(value[i]) * parseInt(setAmount);
Update
After a deeper review, you got a couple of other problems.
Your setAmount variable is "", because it's not set in the HTML.
You are looping through the HoeveelheidArr twice
You should use value instead of value[i]
I made a working example:
var HoeveelheidArr = [];
var total = 0;
const setAmount = document.getElementById("dynamicSet").innerHTML || 0;
function getData() {
HoeveelheidArr = [];
total = 0;
$('#resultTable .HoeveelheidField > input').each(function() {
HoeveelheidArr.push($(this).val() || 0);
});
console.log("HoeveelheidArr:", HoeveelheidArr);
for (var i = 0; i < HoeveelheidArr.length; i++) {
console.log("setAmount:", setAmount);
total += parseInt(HoeveelheidArr[i]) * parseInt(setAmount);
}
console.log("Total:", total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Aantal sets: <span id="dynamicSet">1</span></p>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
<tr>
<th scope="col"></th>
<th scope="col">Hoeveelheid</th>
<th scope="col">Gewicht x KG</th>
</tr>
<tr>
<td>1</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
<tr>
<td>2</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
<tr>
<td>3</td>
<td class="HoeveelheidField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
<td class="GewichtField">
<INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1">
</td>
</tr>
</table>
<button onclick="getData()">Test</button>

why are you using value[i] value is not an array it's just a number.
console.log([value[i]);
the value[1] and value[2] is undefined that why you are getting NaN
If you tell me what do you want to do through this code, I can correct it

Automatic calculation from input fields

I want to construct some input forms that can calculate automatically. Provide below is my input forms.
var form = document.forms.myform,
pv1 = form.pv1,
pv2 = form.pv2,
output = form.pvtotal;
window.calculate = function () {
var p1 = parseInt(pv1.value, 10) || 0,
p2 = parseFloat(pv2.value) || 0;
output.value = (p1 + p2).toFixed(2);
};
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
</style>
<form action="" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="pv1"></td>
<td><input type="number" name="pv2"></td>
<td><input type="number" name="pvtotal"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
As you can see and try, i just provide the sum for previous stock. The main problem is I want all the column be automatic calculated except for the CURRENT STOCK column which i want this column calculated by:
(PREVIOUS STOCK - CULL - MORTALITY = CURRENT STOCK
Then, the other problem whenever i add one row below, all the script did not function anymore. I don't know why. I hope you guys can help me through this.
Below is my expected output:
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
div.scrollmenu {
overflow: auto;
}
h4 {
text-decoration: underline;
text-align: center;
line-height: 1.6;
}
<form action="dailyprod_action.php" method="post" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200" ></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="1200" readonly></td>
</tr>
<tr>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="4000"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400" ></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="3400" readonly></td>
</tr>
</tbody>
</table>
</form>

You can develop my sample script and try
$("#pds_v1").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
$("#pds_v2").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="" id="pds_v1"></td>
<td><input type="number" name="" id="pds_v2"></td>
<td><input type="number" name="" id="pds_sum"></td>
</tr>
</table>

I suggest you use JQuery as that will make your life easier, also there's not much difference between Javascript and JQuery syntax, so it'll be easy for you to learn if you know Javascript.
I moved your onkeyup event listener to the tr tag so you'll be able to do calculate() on every row. I also added this parameter on the calculate() function to get the element that fired that function and get all child from that element to change the output field of that row (the one that fired calculate() function).
Try this code below (this is only inputs for Previous Stock):
function calculate(elem) {
pv1 = $(elem).children()[0].children;
pv2 = $(elem).children()[1].children;
out = $(elem).children()[2].children;
var p1 = parseInt($(pv1).val(), 10) || 0;
var p2 = parseFloat($(pv2).val()) || 0;
$(out).val((p1 * p2).toFixed(2));
}
$('#add_field').click(function() {
$('#table_body').append(`
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
`)
})
$('#remove_field').click(function() {
var len = ($('#table_body').children()).length - 1;
$('#table_body').children()[len].remove();
})
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number] {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" name="myform">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody id="table_body">
<!-- I'm moving your event listener to the <tr> tag -->
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="add_field">Add Field</button>
<button type="button" id="remove_field">Remove Field</button>

Auto Table Calculation

I have table with quantity cell when change quantity it need to multiply with other parent td value.and sum the column values .
(i.e) if i change quantity to 2 then the parent rows need multiply by 2 & columns get value get added
I done all the calculation part without input in td now i added input and the calculation got affected i debug and checked it i don't know what would be the problem
Here my fiddle:
https://jsfiddle.net/hahkarthick/57zpk59k/3/
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).siblings().each(function(){
var tbvalue=$(this).data("val");
var result= parseInt(tbvalue)*parseInt(val);
$(this).text(result);
});
autoSum();
});
autoSum();
});
function autoSum(){
for (var i = 1; i <= 4; i++) {
var sum = 0;
var tdBoxes = $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')');
for(var j=0; j<tdBoxes.length-1;j++)
{
var value = $(tdBoxes[j]).val();
sum += (value == undefined || value == "")? 0 : parseInt(value);
}
// set total in last cell of the column
$('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')').last().html(sum);
// $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover">
<thead>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" data-val="" value="20" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="5" name=""></td>
<td><input type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="45" name=""></td>
<td><input type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="total">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>

Hope this helps...
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-val="" value="20[2]" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="5" name=""></td>
<td><input type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="45" name=""></td>
<td><input type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('.quantity').on('change',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).parent().siblings().each(function(){
var oldval = $(this).find('input').val();
var arr = oldval.split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if(arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum(){
var $dataRows=$("#sum_table tr:not('.total, .title')");
var totals=[0,0,0];
$dataRows.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseFloat( $(this).val());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
}
</script>

I have updated the fiddle.
I have made following changes :-
$('.quantity').on('change, keyup',function(){ changed to $('.quantity').on('keyup',function(){
$(this).siblings().each(function(){ changed to $(this).parent().siblings().each(function(){
var tbvalue=$(this).data("val"); changed to var tbvalue=$(this).find("input[type=number]").val();
Hope it helps.

We Keep Coding

JavaScript is the programming language of the Web.

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

Related

JavaScript add more var not working on onkeyup

How can I query select all inputs from table column

Array sum returns NaN

Automatic calculation from input fields

Auto Table Calculation

Categories

Resources