mercredi 5 août 2015

How to automatically sum input value boxes on each row in a HTML table


I have an HTML table with columns of input boxes(Quantity, Price, Discount and Total). I made a JS function for adding as many rows as I need. I would like to make the Total column, for each row, to display automatically the value of this formula:

(Quantity * Price) - ( Quantity * Price * (Discount/100)) .

I tried numerous JavaScript code, but I have been unable to get anything to correctly work.

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 on FIDDLE.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire