Calculating table quantity and multiplication - javascript

Table_exaple
Hello,
I need some help.
My problem is that I can't figure out how to do this. The whole point of my simple project is to create a table only with input text boxes where only integers will be added, and I need to sum columns only.
As Quantity sum I mean to calculate the whole column and by Calculated sum I need to calculate the Quantity * value of the Heading.
For example: Quantity of column 5$ is 50 therefore the calculated cell must be 250$.
I would also like to add a button that adds columns dynamically and the heading is Custom... so somehow the heading value should be saved as a variable too.
I tried something with jQuery, but it's not relevant because I want that to be calculated dynamically no matter what input I enter in the heading.
Here is my bad jQuery for each column, it works, but that's not the goal.
$(document).ready(function() {
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".txt").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum);
$("#calc").html(sum);
}
$(document).ready(function() {
$(".txt1").each(function() {
$(this).keyup(function() {
calculateSum1();
});
});
});
function calculateSum1() {
var sum = 0;
$(".txt1").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum1").html(sum);
$("#calc1").html(sum *= 2);
}
$(document).ready(function() {
$(".txt2").each(function() {
$(this).keyup(function() {
calculateSum2();
});
});
});
function calculateSum2() {
var sum = 0;
$(".txt2").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum2").html(sum);
$("#calc2").html(sum *= 3);
}
$(document).ready(function() {
$(".txt3").each(function() {
$(this).keyup(function() {
calculateSum3();
});
});
});
function calculateSum3() {
var sum = 0;
$(".txt3").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum3").html(sum);
$("#calc3").html(sum *= 5);
}
$(document).ready(function() {
$(".txt4").each(function() {
$(this).keyup(function() {
calculateSum4();
});
});
});
function calculateSum4() {
var sum = 0;
$(".txt4").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum4").html(sum);
$("#calc4").html(sum *= 10);
}
$(document).ready(function() {
$(".txt5").each(function() {
$(this).keyup(function() {
calculateSum5();
});
});
});
function calculateSum5() {
var sum = 0;
$(".txt5").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum5").html(sum);
$("#calc5").html(sum *= 20);
}
.tftable {
font-size: 12px;
color: #333333;
width: 70%;
margin-right: 15%;
margin-left: 15%;
border-width: 1px;
border-color: #a9a9a9;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #6382c59a;
border-width: 1px;
padding: 18px;
border-style: solid;
border-color: #474747;
text-align: left;
}
.tftable tr {
background-color: #ffffff;
}
.tftable td {
font-size: 12px;
border-width: 2px;
padding: 5px;
border-style: solid;
border-color: #a9a9a9;
}
.tftable td:nth-child(2n+2) {
background: #CCC;
}
.tftable tr td input {
height: 100%;
background: none;
}
.tftable tr th {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.tftable tr td {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
width: 15rem;
}
.tftable tr td input {
border: none;
text-align: center;
padding: 0.7rem;
width: 78%;
}
.button {
padding: 7px 15px;
text-align: center;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #3e8e41;
}
.button:active {
background-color: #3e8e41;
transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="tbl" class="tftable" border="1">
<tr>
<button class="button" onclick="addColumn()">Add Column</button>
<th>Types</th>
<th>1 $</th>
<th>2 $</th>
<th>3 $</th>
<th>5 $</th>
<th>10 $</th>
<th>20 $</th>
</tr>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr style="border-top: 5px solid black">
<td>Quantity</td>
<td><span id="sum"></span></td>
<td><span id="sum1"></span></td>
<td><span id="sum2"></span></td>
<td><span id="sum3"></span></td>
<td><span id="sum4"></span></td>
<td><span id="sum5"></span></td>
</tr>
<td>Calculated</td>
<td><span id="calc"></span></td>
<td><span id="calc1"></span></td>
<td><span id="calc2"></span></td>
<td><span id="calc3"></span></td>
<td><span id="calc4"></span></td>
<td><span id="calc5"></span></td>
</tr>
</table>


The pattern you're looking to follow is called 'Don't Repeat Yourself', or DRY. It's core principle is to create reusable generic structures which do not contain identifiers, but simply any metadata required for processing.
In this case you can provide all the input elements with common class names, not incremental ones nor id. Then in the JS you can determine which column the user is interacting with using index(). From there you can use map() to build an array of all the values in that column and sum them. Finally you can store the column price in a data attribute on the heading and multiply the quantity by that figure to give you your calculated total.
In practice it will look something like the below. Note that this JS will work for an infinite number of rows and columns, all it depends on is the data attribute on the th in order to provide the unit price.
jQuery($ => {
$('.add-column').on('click', e => {
console.log('addColumn() logic here...');
});
let $table = $('#tbl');
$('.txt').on('input', e => {
let tdIndex = $(e.target).closest('td').index();
let colQuantities = $table.find(`tbody td:nth-child(${tdIndex + 1})`).map((i, td) => parseFloat($(td).find('input').val()) || null).get();
let colSum = colQuantities.reduce((acc, cur) => acc + cur, 0);
let colPrice = $table.find(`thead th:nth-child(${tdIndex + 1})`).data('price');
$table.find(`tbody td:nth-child(${tdIndex + 1}) .sum`).text(colSum);
$table.find(`tbody td:nth-child(${tdIndex + 1}) .calc`).text((colSum * colPrice).toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
}));
});
});
input {
width: 50px;
}
.quantity-row {
border-top: 5px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button add-column">Add Column</button>
<table id="tbl" class="tftable" border="1">
<thead>
<tr>
<th>Types</th>
<th data-price="1">1 $</th>
<th data-price="2">2 $</th>
<th data-price="3">3 $</th>
<th data-price="5">5 $</th>
<th data-price="10">10 $</th>
<th data-price="20">20 $</th>
</tr>
</thead>
<tbody>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr class="quantity-row">
<td>Quantity</td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
</tr>
<tr>
<td>Calculated</td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
</tr>
</tbody>
</table>
The other important parts to note here are that you do not need to repeat document.ready handlers for each block of code, you can place all logic which depends on it in a single handler.
In addition, you should not us onclick or other onX attributes as they are outdated and no longer good practice. Use unobtrusive event handlers instead, as the example above shows.


First: The $(document).ready() listener is only necessary to declare the event listeners for the inputs. The rest of the code can be outside.
Calculation
You have ten times the same pair of event listener and function. By getting the index of the input containing cell with $(this).parent().index() you can reduce it to only one pair. For the calculation you have to call the function calculateSum() with that index as parameter.
In the function you have to get the value of the head cell of the column for the multiplication. You can do this by selecting the th with the same index and parse its innerHTML as a number.
let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
Last you can use the index to select the column with concatenation, for example: $("#sum" + index).
The rest works like in your code.
Adding a column
I recommend to not use an inline event listener in your button and instead declare it in the script. The function addColumn() would be the anonymous function of the listener:
$('#add_column').click(function() {...});
In that function you first have to get the value of the new head cell (here price). The rest of the function is only executed if the value is true (!!price / double negation for converting to a boolean), which means the user typed in a value.
Then you have to get the number of inputs per row, for example from the second row:
const cell_count = $("#tbl tr").eq(2).find('input').length;
and the number of table rows, minus the last two rows "Quantity" and "Calculated":
const row_count = $("#tbl tr").length - 2;
After that you have to add to each table row a new cell. The number of table rows is used to iterate over the rows with inputs and the number of inputs per row is used for making the ids and classes with concatenation.
Finally you need to redeclare the event listeners for the inputs, so that the new inputs are considered. For that you first have to remove the old listeners and than redeclare them.
$("#tbl input").off('keyup').on('keyup', function() {...});
Working example:
Because name and id of the inputs aren't used i removed them for simplicity. I changed the outdated var to let and const.
function calculateSum(index) {
let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
let sum = 0;
index = index == 1 ? '' : index - 1;
$(".txt" + index).each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum" + index).html(sum);
$("#calc" + index).html(sum * factor);
}
$(document).ready(function() {
$("#tbl input").on('keyup', function() {
calculateSum($(this).parent().index());
});
});
$('#add_column').click(function() {
const price = prompt('Add the price for the new column (only digits):', '30');
if (!!price) {
const cell_count = $("#tbl tr").eq(2).find('input').length;
const row_count = $("#tbl tr").length - 2;
for (let i = 1; i < row_count; i++) {
$("#tbl tr").eq(i).append(
$('<td></td>').append(
$('<input>').attr({
type: 'text'
}).addClass('txt' + cell_count)
)
);
}
$("#tbl tr").first().append(
$('<th></th>').html(price + ' $')
);
$("#tbl tr:nth-last-child(2)").append(
$('<td></td>').append(
$('<span></span>').attr({
id: ('sum' + cell_count)
})
)
);
$("#tbl tr:last-child").append(
$('<td></td>').append(
$('<span></span>').attr({
id: ('calc' + cell_count)
})
)
);
$("#tbl input").off('keyup').on('keyup', function() {
calculateSum($(this).parent().index());
});
}
});
.tftable {
font-size: 12px;
color: #333333;
width: 70%;
margin-right: 15%;
margin-left: 15%;
border-width: 1px;
border-color: #a9a9a9;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #6382c59a;
border-width: 1px;
padding: 18px;
border-style: solid;
border-color: #474747;
text-align: left;
}
.tftable tr {
background-color: #ffffff;
}
.tftable td {
font-size: 12px;
border-width: 2px;
padding: 5px;
border-style: solid;
border-color: #a9a9a9;
}
.tftable td:nth-child(2n+2) {
background: #CCC;
}
.tftable tr td input {
height: 100%;
background: none;
}
.tftable tr th {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.tftable tr td {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
width: 15rem;
}
.tftable tr td input {
border: none;
text-align: center;
padding: 0.7rem;
width: 78%;
}
.button {
padding: 7px 15px;
text-align: center;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #3e8e41;
}
.button:active {
background-color: #3e8e41;
transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_column" class="button">Add Column</button>
<table id="tbl" class="tftable" border="1">
<tr>
<th>Types</th>
<th>1 $</th>
<th>2 $</th>
<th>3 $</th>
<th>5 $</th>
<th>10 $</th>
<th>20 $</th>
</tr>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr style="border-top: 5px solid black">
<td>Quantity</td>
<td><span id="sum"></span></td>
<td><span id="sum1"></span></td>
<td><span id="sum2"></span></td>
<td><span id="sum3"></span></td>
<td><span id="sum4"></span></td>
<td><span id="sum5"></span></td>
</tr>
<tr>
<td>Calculated</td>
<td><span id="calc"></span></td>
<td><span id="calc1"></span></td>
<td><span id="calc2"></span></td>
<td><span id="calc3"></span></td>
<td><span id="calc4"></span></td>
<td><span id="calc5"></span></td>
</tr>
</table>

Related

How to reset rows in a table

below is a table that contains text boxes. I want to reset each row individually, but right now it is resetting the whole table. What is the best known method to attack this problem? At the moment I am using jquery, but I am not sure if javascript would work any better. I also did try to iterate through each row, but somehow I got the same results and nothing changed.
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<html>
<body>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myForm').trigger("reset");
});
</script>
</body>
</html>

I changed your input type reset to type button.
On click such a button can set the value of each input to an empty string:
// save initial values in a data attribute for each input....
$('#myForm :input:not([type="button"])').each(function(idx, ele) {
ele.dataset.initvalue = ele.value;
});
$('#myForm [type="button"]').on('click', function(e) {
// reset current row............
$(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {
// restore the initial value
ele.value = ele.dataset.initvalue;
})
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>

You do not want to use type="reset" for your reset buttons, just stick with type="button". You do not want to reset the entire form.
You can add a click listener to these buttons to get the current row of the clicked button.
This can be achieved via: $(e.target).parent().parent() or $(e.target).closest('tr')
Once you have the row, you can locate your input fields and set their values to a default value or empty string.
Update: Using jQuery .data()
You can store the original values as data for the field. This is probably the most versatile method and it allows you to store the value of any input field.
(function($) {
$.fn.assignDefaultValues = function() {
$(this).find('input').each(function() {
$(this).data('defaultValue', $(this).val());
});
};
})(jQuery);
$('.zui-table').assignDefaultValues();
$('.zui-table td > input[type="button"]').on('click', function() {
const $tr = $(this).closest('tr');
$tr.find('td > input[type="text"]').each(function() {
$(this).val($(this).data('defaultValue') || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
Storing data the old-fashioned way
Alternatively, if you want to recall the previous values, you could store the values ahead of time. This can be helpful for building an export function.
(function($) {
$.fn.storeTableValues = function() {
return this.find('tbody tr').map(function() {
return [$(this).find('td > input[type="text"]').map(function() {
return $(this).val();
}).toArray()];
}).toArray();
};
})(jQuery);
const originalValues = $('.zui-table').storeTableValues();
$('.zui-table td > input[type="button"]').on('click', function(e) {
const $button = $(e.target);
const $tr = $button.closest('tr');
const index = $tr.closest('table').find('tbody tr').index($tr);
$tr.find('td > input[type="text"]').each(function(col) {
$(this).val(originalValues[index][col] || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>

The <input type="reset"> defines a reset button which resets all form values to its initial values.
So, you should implement a button that trigger some function that do the trick for reseting each row.
From Here:
https://www.w3schools.com/tags/att_input_type_reset.asp

Errors with freeze table header - HTML [duplicate]

This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 2 years ago.
I am trying to enter entries in table inputs for my inventory website. I want to freeze the headers of each column and tried doing it with this -> Freeze the top row for an html table only (Fixed Table Header Scrolling)
window.onload = function(){
var to_show = '';
for(var i = 1 ; i < 50 ; i++){
to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
}
document.getElementById('addInside_tr_20').innerHTML = to_show;
}
#import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
--purple-theme: #091428;
--lightpurple-theme: #0f3a41;
--gray-bg-heading: #b8b8b8;
--gray-bg-sidebar: #dee3e7;
--lightgreen-theme: #65ffce;
--green-theme: #46b692;
--red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px 0px 10px 10px;
background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--green-theme);
border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--lightgreen-theme);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-moz-selection {
/* Code for Firefox */
color: var(--purple-theme);
background: var(--green-theme);
}
::selection {
color: var(--purple-theme);
background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
outline-color: var(--lightgreen-theme);
}
body {
height: 100%;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
table,
select,
input,
a {
color: whitesmoke;
}
input {
width: 100%;
line-height: 5px;
font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
height: 30px;
border: 1px solid var(--green-theme);
background-color: transparent;
color: whitesmoke;
font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--green-theme);
background-color: var(--green-theme);
color: var(--purple-theme);
text-decoration-style: bold;
font-size: 15px;
border-radius: 0px 15px 15px 0px;
}
/* ------grid container------ */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
input[type="date"] {
height: 100%;
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 10px;
padding: 10px;
margin: 0 auto;
color: whitesmoke;
}
.grid {
background-color: var(--purple-theme);
border: 1px solid lightgrey;
padding: 20px;
}
.inside > span {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-size: 18px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 5;
}
.item3 {
grid-column: 5 / 7;
}
.item4 {
grid-column: 7 / 9;
}
.item5 {
grid-column: 1 / 9;
}
.inside {
padding: 0;
padding-bottom: 10px;
border: none;
}
.item2 {
grid-column: 1 / 9;
grid-row: 1 / 5;
}
.inside input[type="text"] {
width: 200px;
}
.item2 select,
.item2 option {
width: 100%;
height: 30px;
background-color: var(--purple-theme);
border: 1px solid var(--green-theme);
text-align: center;
}
.item2 select option {
background: var(--purple-theme);
}
.item2 table {
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 20px;
}
.details table:nth-child(1) {
margin-top: -20px;
}
.details {
margin-top: -20px;
}
.item2 th {
background-color: var(--green-theme);
color: var(--purple-theme);
padding: 15px;
}
.item2 a {
text-decoration: underline;
}
/* main edit here start */
#text-area td:nth-child(1) {
width: 80%;
}
#text-area td:nth-child(2) {
width: 20%;
}
#text-area thead th:nth-child(1) {
width: 80%;
}
#text-area thead th:nth-child(2) {
width: 20%;
}
#text-area thead {
display: block;
}
#text-area tbody {
height: 440px;
display: block;
overflow: auto;
width: 100%;
}
#text-area input {
width: 100%;
}
#text-area input {
border: none;
}
#text-area {
border: 1px solid var(--green-theme);
}
#text-area tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
#text-area td:nth-child(4) {
border-right: none;
}
#text-area td {
border-right: 1px solid var(--green-theme);
}
/* main edit here ends */
.item2 .inside table * {
padding-bottom: 20px;
}
.suggestion {
position: absolute;
background-color: var(--purple-theme);
font-size: smaller;
cursor: pointer;
}
.suggestion_i:hover {
color: var(--purple-theme);
background-color: var(--green-theme);
}
.suggestion_i {
cursor: pointer;
text-align: center;
text-justify: center;
padding: 10px 10px -5px 10px;
}
#sorted_div {
background-color: var(--purple-theme);
/*position:absolute;*/
top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
<div class="grid_container">
<div class="grid item2">
<div class="inside" id="topTableID">
<form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
<table>
<tr>
<td><label for="">Location :</label></td>
<td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
<td><label>Product Suggestion : </label></td>
<td>
<div id="product_suggestion" class="suggestion"></div>
</td>
</tr>
<tr>
<td>
<div id="suggestion" class="suggestion"></div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="details">
<table id="text-area">
<thead>
<tr>
<th><label>Product Name</label></th>
<th><label>Current Locations</label></th>
</tr>
</thead>
<tbody id="addInside_tr_20">
<!--there will be some rows added here -->
</tbody>
</table>
<table>
<tr>
<td><input type="reset" value="Reset" tabindex="-1"></td>
<td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
You can check the code on [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignore most of the css as they are just to replicate what I had so that I don't miss something out)
(Sorry for the extensive code length) The Problem is the "thead" is not aligned with "tbody" as in column perspective because of overflow in vertical direction. I've asked this question before but that doesn't seem to work for me. Also, there will be some more columns added in the future. No custom size width answers please

You may reset the table-layout to fixed, turn tr into tables and apply the width to each cells, then add a 1.2em padding or margin right on thead (average width of a scrollbar).
answer inspired from How to set tbody height with overflow scroll and probably a duplicate.
table {
border: 1px solid;
}
tr {
display: table;
table-layout: fixed;
}
#text-area {
border: 1px solid;
}
#text-area tr :nth-child(1) {
width: 15%;
}
#text-area tr :nth-child(2) {
width: 60%;
}
#text-area tr :nth-child(3) {
width: 10%;
}
#text-area tr :nth-child(4) {
width: 15%;
}
#text-area thead {
display: block;
padding-right:1.2em;
}
#text-area tbody {
height: 200px;
display: block;
overflow: auto;
}
input {
box-sizing:border-box;
min-width: 100%;
}
<table id="text-area">
<thead>
<tr>
<th><label>Barcode</label></th>
<th><label>Product Name</label></th>
<th><label>Count</label></th>
<th><label>QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS"></td>
<td><input type="text" value="4"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER"></td>
<td><input type="text" value="2"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
</tbody>
</table>

You could set input box width 100% and add pixels width to th and td, instead of percentages.,
The input box width 100% will help to set it to its parent width and remove its default width. The pixels can help to have a fixed width and alignment problems.
table{
border: 1px solid;
}
#text-area{
border: 1px solid;
}
#text-area td:nth-child(1){
width: 100px;
}
#text-area td:nth-child(2){
width: 200px;
}
#text-area td:nth-child(3){
width: 100px;
}
#text-area td:nth-child(4){
width: 100px;
}
#text-area thead th:nth-child(1){
width: 100px;
}
#text-area thead th:nth-child(2){
width: 200px;
}
#text-area thead th:nth-child(3){
width: 100px;
}
#text-area thead th:nth-child(4){
width: 100px;
}
#text-area thead{
display:block;
}
#text-area tbody{
height:200px;
display:block;
overflow:auto;
}
#text-area input{
width:100%
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

th {
background-color: #fff;
}
th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

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>

How to add multiple text boxes of currency using JavaScript when one could be empty?

I am attempting to build a form that only adds boxes together when the input is not empty. Thus far, I can get the form to work when at least two boxes are not empty. However, I can not seem to get the form to work when only one box has a value present.
I have tried adding an additional line to the code as follows:
else if (debit1 != "") {
totalDebit = parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
However, this does not appear to work.
For some detail, I would still consider myself inexperienced with JavaScript, having only used it for form validation in the past. These validations mostly dealt with just required text boxes or drop down boxes so relatively simple things. I realize that a loop may be a better way to go about achieving these results but I am not yet familiar enough with those to attempt on my own.
CSS:
<style>
.Header
{
border: solid black 1px;
background-color: #a9e6fc;
padding: 5px;
text-align: center;
}
table
{
border-collapse: separate;
width: 100%;
border: 1px solid black;
}
table.ex1
{
table-layout: auto;
}
.actionButtons
{
border: solid black 1px;
padding: 5px;
overflow: auto;
background-color: #ff5b5b;
}
.submitButton
{
font-size: 16px;
float: left;
}
.cancelButton
{
font-size: 16px;
float: right;
}
</style>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>GL Ticket</title>
</head>
<body>
<form name="myForm" method="post">
<table>
<tr>
<td>Account:</td><td>DEBIT</td><td>CREDIT</td><td>T/C</td><td>DATE</td><td>CHECK #</td><td>SPECIFIC G/L DESCRIPTION</td>
</tr>
<td><input type="text" id="OBKey__51_1" name="OBKey__51_1" size="15" maxlength="10"></td>
<td><input type="text" id="debit1" name="debit1" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
<tr>
<td><input type="text" id="OBKey__51_2" name="OBKey__51_2" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit1" name="credit1" size="15" maxlength="10"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_3" name="OBKey__51_3" size="15" maxlength="10"></td>
<td><input type="text" id="debit2" name="debit2" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_4" name="OBKey__51_4" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit2" name="credit2" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_5" name="OBKey__51_5" size="15" maxlength="10"></td>
<td><input type="text" id="debit3" name="debit3" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_6" name="OBKey__51_6" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit3" name="credit3" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
<td></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_7" name="OBKey__51_7" size="15" maxlength="10"></td>
<td><input type="text" id="debit4" name="debit4" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_8" name="OBKey__51_8" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit4" name="credit4" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="debitTotal" name="debitTotal"></td>
<td><input type="text" id="creditTotal" name="creditTotal"></td>
</tr>
</table>
<div class="actionButtons">
<input type="submit" class="submitButton" value="Save" name="OBBtn_Yes" onclick="return validateForm()">
<input type="reset" class="cancelButton" value="Reset" name="OBBtn_Reset">
</div>
</form>
</body>
</html>
JavaScript:
<script>
function validateForm()
{
var a = document.forms["myForm"]["debitTotal"].value;
var b = document.forms["myForm"]["creditTotal"].value;
if (a != b) {alert("NO MATCH.");
return false;
}
}
calculateDebits = function()
{
var debit1 = document.getElementById("debit1").value;
var debit2 = document.getElementById("debit2").value;
var debit3 = document.getElementById("debit3").value;
var debit4 = document.getElementById("debit4").value;
var totalDebit;
if (debit4 != "" && debit3 != "" && debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit4) + parseFloat(debit3) + parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
else if (debit3 != "" && debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit3) + parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
else if (debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
}
calculateCredits = function()
{
var credit1 = document.getElementById("credit1").value;
var credit2 = document.getElementById("credit2").value;
var credit3 = document.getElementById("credit3").value;
var credit4 = document.getElementById("credit4").value;
var totalCredit;
if (credit4 != "" && credit3 != "" && credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit4) + parseFloat(credit3) + parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
else if (credit3 != "" && credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit3) + parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
else if (credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
}
</script>
The result I would like to achieve is having these boxes always add and place a value in the debitTotal and creditTotal spots. These values will always be United States currency as well if that is helpful to know. I know it would likely be beneficial to have a way to check that a decimal exists from the third to last position of the debit and credit elements.
Thank you in advance for any assistance or conceptual understanding I get out of asking this question.

This sounds like you're looking for something like "sum" in excel.
First, give every element you want to sum a property that signals that.
For e.g. give your debits the class debit.
<td><input type="text" id="debit1" class="debit" name="debit1" size="15" maxlength="10"></td>
Now you can select them all using querySelectorAll:
let debits = document.querySelectorAll(".debit")
and loop through it (read about it, you will need it over and over again).
let debitValue = 0;
for (var debit in debits) {
if (debits.hasOwnProperty(debit) && debits[debit].value > 0) {
debitValue += debits[debit].value;
}
}
document.getElementById("debitTotal").value = debitValue;
Not tested but that should help you.

How to calculate sum of one field in table and put it in an input

I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.

If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />

var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />

I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>

Categories