How to automatically summarize value input fields in each row in HTML table
I have an HTML table with columns of input fields (quantity, price, discount and total). I have created a JS function to add as many lines as I need. I would like the Total column for each row to automatically display the value of this formula:
(Quantity * Price) - (Quantity * Price * (Discount / 100)).
I've tried a lot of JavaScript code, but I haven't been able to get anything to work correctly.
HTML:
<table id="myTable">
<tr>
<th width="65%"></th>
<th align="center" width="5%">Q<br>-ty</th>
<th align="center" width="10%">Price,</br>$</th>
<th align="center" width="5%">Discount,<br>%</th>
<th align="center" width="15%">Total, $<br>(Without tax)</th>
</tr>
<tr>
<td width="65%"><input class="Left" size="100" type="text" name="Description"></td>
<td align="center" width="5%"><input type="number" name="quantity" min="1" max="99"></td>
<td align="center" width="10%"><input type="number" name="summ" min="0" max="999999"></td>
<td align="center" width="5%"><input type="number" name="rate" min="0" max="100"></td>
<td align="center" width="15%"><input align="center" type="number" name="total" min="0" max="99999999"></td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
JavaScript:
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
cell2.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"quantity\" min=\"1\" max=\"99\"></div>";
cell3.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"summ\" min=\"0\" max=\"999999\"></div>";
cell4.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"rate\" min=\"0\" max=\"100\"></div>";
cell5.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\"></div>";
}
source to share
There is a slightly different example. I am removing this one div
from your js code.
function calc(id) {
var row=id.parentNode.parentNode;
var quant=row.cells[1].getElementsByTagName('input')[0].value;
var price=row.cells[2].getElementsByTagName('input')[0].value;
var disc=row.cells[3].getElementsByTagName('input')[0].value;
if(disc==null || disc=='') {
res=parseFloat(quant)*parseFloat(price);
} else {
var res=(parseFloat(quant)*parseFloat(price))-(parseFloat(quant)*parseFloat(price)*(parseFloat(disc)/100));
}
row.cells[4].getElementsByTagName('input')[0].value=res;
}
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
cell2.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"quantity\" min=\"1\" max=\"99\">";
cell3.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"summ\" min=\"0\" max=\"999999\">";
cell4.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"rate\" min=\"0\" max=\"100\">";
cell5.innerHTML = "<input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\">";
}
body {
font-family: "Calibri"; margin:0;}
#inTotal {
font-weight: bold;
border-bottom: 2px solid black;
}
.nr {
font-weight: bold;
}
input {
border: none;
background: transparent;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.Left {
text-align: left;
margin-left: 5px;
}
<table id="myTable">
<tr>
<th width="65%"></th>
<th align="center" width="5%">Q<br>-ty</th>
<th align="center" width="10%">Price,</br>$</th>
<th align="center" width="5%">Discount,<br>%</th>
<th align="center" width="15%">Total, $<br>(Without tax)</th>
</tr>
<tr>
<td width="65%"><input class="Left" size="100" type="text" name="Description"></td>
<td align="center" width="5%"><input onkeyup="calc(this);" type="number" name="quantity" min="1" max="99" onchange="calc(this);"></td>
<td align="center" width="10%"><input onkeyup="calc(this);" type="number" name="summ" min="0" max="999999" onchange="calc(this);"></td>
<td align="center" width="5%"><input onkeyup="calc(this);" type="number" name="rate" min="0" max="100" onchange="calc(this);"></td>
<td align="center" width="15%"><input align="center" type="number" name="total" min="0" max="99999999"></td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
I add another function to calculate the formula for every change or number entered.
This function is placed in each input
expected last ( onchange="calc(this)
and onkeyup=calc(this);
). I put it right onkeyup
at the beginning input
. In this case, calibration will occur after entering the number.
The code, as you can see, is only js.
source to share