JS Table with input and field filling.

Question

Good afternoon, there is a table in which one of the input fields when filled in (when the focus is lost), the value of this input must be multiplied by the value in the next cell and output the result to the next cell. In general, this is a common label: quantity * price = amount. In JS is weak, please help.

Jsfiddle table example

table{ width:100%; border: 1px solid black; }

 <table id="table-price-box"> <tr> <td>Наименование</td> <td>Классификатор</td> <td>Свойства</td> <td>Количество</td> <td>Цена</td> <td>Итого</td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> <tr> <td>Корпус</td> <td>ТТБ</td> <td>Пластик</td> <td><input onchange="" type="number"></td> <td>88</td> <td></td> </tr> </table>

Qwertiy ♦ Qwertiy 76k 17 73 199 · Accepted Answer · 2017-03-01T12:07:27

 document.getElementById("table-price-box").addEventListener("input", function (e) { var inp = e.target; if (inp.tagName === "INPUT") { //var tr = inp.closest("tr"); var tr = inp.parentElement.parentElement; tr.querySelector(".sum").textContent = tr.querySelector(".price").textContent * inp.value; } });

 table{ width:100%; border: 1px solid black; }

 <table id="table-price-box"> <tr><td>Наименование<td>Классификатор<td>Свойства<td>Количество<td>Цена<td>Итого</tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum"></tr> </table>

Whether prompt still it is possible means of js to dynamically change the value of the cell price depending on the value in the input?
For example, up to 50, the price is 88, from 50 to 100, the price is 77
Thanks again, your option fits better since there are columns with rowspan.
Tell me how to implement a dynamic change in the value of the cell "price" from the value of input.
And how can I output the sum of all the values of all the "Total" cells into an arbitrary <div>?

oleg kalenchuk oleg kalenchuk 116 four · Answer 2 · 2017-03-01T12:00:41

Offhand, if possible with jQuery

 $('#table-price-box input').change(function() { var $this = $(this); var $tr = $this.closest('tr'); var cnt = parseFloat($this.val()); var price = parseFloat($tr.find('td:eq(4)').text()); $tr.find('td:eq(5)').text((cnt * price).toFixed(2)); });

https://jsfiddle.net/w3jnorqb/1/

Whether prompt still it is possible means of js to dynamically change the value of the cell price depending on the value in the input?
For example, up to 50, the price is 88, from 50 to 100, the price is 77

JS Table with input and field filling.

2 answers 2

More articles: