We Keep Coding

Calculating table quantity and multiplication

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>

Input fields lose css attributes after text input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a table of cells in html
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
With the following css
* { box-sizing: border-box; }
table { margin: 10px; }
tr:first-child td {
border-top-color: black;
}
tr:nth-child(3n) td {
border-bottom-color: black;
}
td {
border: 1px solid lightgrey;
height: 40px;
width: 40px;
}
td:first-child {
border-left-color: black;
}
td:nth-child(3n) {
border-right-color: black;
}
input {
padding: 0;
text-align: center;
border: 0;
height: 40px;
width: 40px;
text-align: center;
}
input:hover {
background: #eee;
}
This allows each cell to be editable and when you hover over the cell it changes colour slightly
I added this js to add values to the cells
document.querySelectorAll('td').forEach((cell) => {
cell.textContent = "1";
})
This does its job it fills the grid with the number but it also makes the css stop working it no longer lets me edit and no longer has the hover effects it also seems to change the font?
Im i correct in using 'textContent' ?
Any help would be appreciated thanks

you need to set the value to the input, not to the cell as a text,
ex, like this:
document.querySelectorAll('td').forEach((cell) => {
cell.querySelector('input').value = '1'
})
also, it's not stopping CSS, and it's important to know that your cells are editable because you have input elements, it's not doable to make elements editable by CSS,

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

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>

Adding a New Row to a Dynamically Created HTML Table

I found a great little widget that creates an HTML table with an input text field that allows a user to insert text in the fields and add a new row at the bottom with a button click. After the data is added, it has a button to allow the user to download the table as a CSV file. It works great but I’m trying to update it with a new feature.
Currently, the table is hand-written in the HTML. This is great when I want the user to input in new data in a clean input text field or add/update data that is already in place. I still have a use for this option.
The new option I like to offer, the user can update existing CSV data in the table. I manage to replace the hand-written HTML with a dynamically created table from an existing CSV file. Everything works except for adding the new row. The new row shows but it’s not formatted correctly (just slightly off) and instead of adding one new row at the bottom like the original concept it adds several new rows sometimes (random number of rows). Other then that everything works as expected.
I have gone over the script, but I can’t manage to fix’s this problem. The dynamic table is created with D3.js and a CSV file; everything else is JavaScript/jQuery/, HTML and CSS. Any help to see what I’m missing would be appreciated.
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Update Table and CSV</title>
<meta charset = "UTF-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/d3.v3.js"></script>
<script src="js/d3Tip.js"></script>
<script src="js/jquery.fancybox-buttons.js"></script>-->
<style>
body {
margin: 0 auto;
}
#container{
width:95%;
height:auto;
margin: 0 auto;
border: 1px solid rgba(153,153,153,1);
background-color: rgba(255,255,255,1);
overflow:hidden;
}
.header {
width:100%;
height:60px;
background-color: grey;
}
.btn{
width: 6.5em;
height: auto;
margin-right: .5em;
padding: .2em;
background-color: black;
text-align: center;
font-size: 1em;
color: white;
font-family: Arial, Helvetica, sans-serif;
position: relative;
float: right;
top: 1.2em;
cursor: pointer;
}
.content {
width:100%;
height:auto;
}
.footer{
width:100%;
height:60px;
background-color: grey;
}
#clear{
clear: both;
}
/*Table Style*/
.btn {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
text-decoration: none;
}
.btn-blue {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
}
.btn-blue:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
.btn-green {
background: #75c987;
background-image: -webkit-linear-gradient(top, #75c987, #468054);
background-image: -moz-linear-gradient(top, #75c987, #468054);
background-image: -ms-linear-gradient(top, #75c987, #468054);
background-image: -o-linear-gradient(top, #75c987, #468054);
background-image: linear-gradient(to bottom, #75c987, #468054);
}
.btn-green:hover {
background: #75c987;
background-image: -webkit-linear-gradient(top, #75c987, #75c987);
background-image: -moz-linear-gradient(top, #75c987, #75c987);
background-image: -ms-linear-gradient(top, #75c987, #75c987);
background-image: -o-linear-gradient(top, #75c987, #75c987);
background-image: linear-gradient(to bottom, #75c987, #75c987);
}
#inputsTable{
margin:20px 0;
position: relative;
z-index: 50;
}
input{
width:150px;
}
.input-id{
width:20px;
}
.input-graphic{
width:100px;
}
.input-date{
width:100px;
}
.input-marker{
width:200px;
}
.input-imageCount{
width:200px;
}
.input-speed{
width:200px;
}
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<div class="header" ></div>
<div class="content">
<h1>Update</h1>
<table id="inputsTable"></table>
Add new table row
Download CSV file<div id="clear"></div><br><br>
</div><!--Close content-->
<div class="footer"></div><!--Close footer-->
</div><!--Close container-->
<script>
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#inputsTable")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.attr('class',function(d) { return 'csv-row'})
.selectAll("td")
.data(function(d) { return d; }).enter().append("td")
.append('input')
.attr('type','text')
.attr('name','textInput')
.attr('value', function(d){ return d;});
});
$(document).ready(function(){
(function($) {
var ieOldFn = null;
var getRandomNumber = function() {
return Math.floor(Math.random() * 100);
};
var addRowClick = function() {
$("table").find("tr:last").clone().appendTo($("table"));
$("table").find("tr:last").find("input").each(function(ind, el) {
if (ind === 0) {
var id = parseInt($(el).val());
$(el).val(id + 1);
} else {
$(el).val('');
}
});
updateCsvLink();
};
var updateCsvLink = function() {
var csvString = "id,graphic,date,marker,imageCount,speed";///CSV file header
$(".csv-row").each(function() {
csvString += "\n";
var separator = "";
$(this).find("input").each(function() {
csvString += separator + $(this).val();
separator = ",";
});
});
var fileName = 'productData.csv';
console.log(csvString);
window.URL = window.URL || window.webkiURL;
var blobObj = new Blob([csvString]);
var lnkElement = document.getElementById('lnkFile');
if (typeof window.navigator.msSaveOrOpenBlob != "undefined") {
var clickFn = function() {
window.navigator.msSaveOrOpenBlob(blobObj, fileName);
};
if(ieOldFn !== null){
lnkElement.removeEventListener('click', ieOldFn, true);
}
lnkElement.addEventListener('click', clickFn, true);
ieOldFn = clickFn;
} else {
var fileUrl = window.URL.createObjectURL(blobObj);
lnkElement.setAttribute('href', fileUrl);
lnkElement.setAttribute('download', fileName);
}
};
$('#inputsTable').on('change', 'input', updateCsvLink);
$('#addRowBtn').on('click', addRowClick);
updateCsvLink();
})(jQuery);
});
</script>
</body>
</html>
Below is the hand-written HTML table being replaced with the dynamic table.
<table id="inputsTable">
<thead>
<tr>
<th>id</th>
<th>graphic</th>
<th>date</th>
<th>marker</th>
<th>imageCount</th>
<th>speed</th>
</tr>
</thead>
<tbody>
<tr class="csv-row">
<td><input class="input-id" readonly value="0" ></td>
<td><input class="input-graphic" value="Slide1.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="510" ></td>
<td><input class="input-imageCount" value="3" ></td>
<td><input class="input-speed" value="5000" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="1" ></td>
<td><input class="input-graphic" value="Slide2.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="520" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="2" ></td>
<td><input class="input-graphic" value="Slide3.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="530" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="3" ></td>
<td><input class="input-graphic" value="Slide4.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="540" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="4" ></td>
<td><input class="input-graphic" value="Slide5.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="550" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="5" ></td>
<td><input class="input-graphic" value="Slide6.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="560" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="6" ></td>
<td><input class="input-graphic" value="Slide7.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="570" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="7" ></td>
<td><input class="input-graphic" value="Slide8.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="580" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="8" ></td>
<td><input class="input-graphic" value="Slide9.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="590" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="9" ></td>
<td><input class="input-graphic" value="Slide10.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="600" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="10" ></td>
<td><input class="input-graphic" value="Slide11.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="610" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="11" ></td>
<td><input class="input-graphic" value="Slide12.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="620" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="12" ></td>
<td><input class="input-graphic" value="Slide13.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="630" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="13" ></td>
<td><input class="input-graphic" value="Slide14.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="640" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="14" ></td>
<td><input class="input-graphic" value="Slide15.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="650" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="15" ></td>
<td><input class="input-graphic" value="Slide16.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="660" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="16" ></td>
<td><input class="input-graphic" value="Slide17.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="670" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="17" ></td>
<td><input class="input-graphic" value="Slide18.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="680" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="18" ></td>
<td><input class="input-graphic" value="Slide19.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="690" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="19" ></td>
<td><input class="input-graphic" value="Slide20.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="700" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="20" ></td>
<td><input class="input-graphic" value="Slide21.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="710" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
<tr class="csv-row">
<td><input class="input-id" readonly value="21" ></td>
<td><input class="input-graphic" value="Slide22.JPG" ></td>
<td><input class="input-date" value="08/01/2016" ></td>
<td><input class="input-marker" value="720" ></td>
<td><input class="input-imageCount" value="" ></td>
<td><input class="input-speed" value="" ></td>
</tr>
</tbody>
</table>-->