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>";
}

      

My code is in FIDDLE.

+3


source to share


1 answer


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>
      

Run codeHide result




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.

+1


source







All Articles