1

Добрый день, имеется таблица в которой одно из полей input при заполнении которого(при потере фокуса), значение этого инпута надо помножить на значение в соседней ячейке и вывести результат в следующую ячейку. Вобщем это обычная табличка: количество*цена=сумма. В JS слаб, помогите пожалуйста.

Пример таблицы на jsfiddle

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>

2 ответа 2

3

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>

4
  • Спасибо большое. Подскажите ещё можно ли средствами js динамически изменять значение ячейки цена в зависимости от значения в input? К примеру до 50 цена 88, от 50 до 100 цена 77
    – Dumb
    1 мар 2017 в 12:16
  • 1
    @Dumb, конечно можно.
    – Qwertiy
    1 мар 2017 в 12:19
  • Спасибо ещё раз ваш вариант подходит лучше так как имеются столбцы с rowspan. Подскажите как реализовать динамическую смену значения ячейки "цена" от значения input. И как можно вывести сумму всех значений всех ячеек "Итого" в произвольный <div>?
    – Dumb
    1 мар 2017 в 14:12
  • @Dumb, а в чём именно заключается проблема? И предлагаю задать отдельный вопрос.
    – Qwertiy
    1 мар 2017 в 17:23
2

Навскидку, если можно c 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/

6
  • Спасибо большое. Подскажите ещё
    – Dumb
    1 мар 2017 в 12:07
  • Ну вот... А я уже без jQuery сделал...
    – Qwertiy
    1 мар 2017 в 12:08
  • У таких 'td:eq(4)' селекторов так себе производительность. В данном случае можно отдать браузеру nth-child. И parseFloat зло. Да ещё и не нужен.
    – Qwertiy
    1 мар 2017 в 12:09
  • Спасибо большое. Подскажите ещё можно ли средствами js динамически изменять значение ячейки цена в зависимости от значения в input? К примеру до 50 цена 88, от 50 до 100 цена 77
    – Dumb
    1 мар 2017 в 12:16
  • $tr.find('td:eq(4)').text(cnt < 50 ? '88' : '77'); 1 мар 2017 в 12:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.