1

Добрый день.
Есть таблица в ней <td class="sum">, необходимо посчитать сумму всех этих ячеек.
Также подскажите как реализовать смену значения ячейки Цена <td class="price"> в зависимости от значения введённого числа в поле <input>, к примеру до 50 = 88, от 50 до 100 = 70
Заранее спасибо.
https://jsfiddle.net/Dumb/3xLrrdws/3/

2
  • Мне кажется это лучше делать не в html, а на стороне сервера. Если всётаки на js то у таблицы есть rows, а дальше ячейки через nextSibling можно найти.
    – nick_n_a
    2 мар 2017 в 11:29
  • Считать сумму значений ячеек логичнее в браузере на js, да и искать ячейки особо не нужно: у нужных ячеек свой класс 'sum'. Я просто не знаю как посчитать на js все ячейки с определённым классом
    – Dumb
    2 мар 2017 в 11:46

2 ответа 2

2

Как то так:

function calculateSum(inp,tr ) {
 if (inp.tagName === "INPUT") {
    tr.querySelector(".sum").textContent = tr.querySelector(".price").textContent * inp.value;
  }
}

function changePrice(inp, tr) {
   tr.querySelector(".price").textContent = parseInt(inp.value) <= 50 ? 88 : 70;
}

function total() {
  table = document.getElementById('table-price-box').getElementsByTagName('tr');
  var sum = 0;
  for(var i = 0; i < table.length; i++) {
    if(table[i].querySelector('.sum') && table[i].querySelector('.sum').textContent) {
      sum +=parseInt(table[i].querySelector('.sum').textContent);
    }
   
   
  }
  
  return sum;
}

document.getElementById("table-price-box").addEventListener("input", function (e) {
  var inp = e.target;
  var tr = inp.parentElement.parentElement;
  changePrice(inp, tr);
  calculateSum(inp, tr);
  document.getElementById("total").textContent = total();
});
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>

<p>всего <span id="total">0</span></p>

2

Сумма:

let arr = Array
          .from(document.querySelectorAll('.sum')) // собираем массив из нод с классом .sum
          .map((item) => {
            return item.innerHTML // трансформируем массив в массив содержащий уже не ноды, а их содержимое
          })
          .map(Number); // приводим к числовому типу

let total = arr.reduce((sum, item) => {
  return sum+item; // считаем сумму массива
});

console.log(total);
<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">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
<p>всего <span id="total"></span></p>
</table>

Замена значений в зависимости от ввода в input[type=number]:

let arr = Array.from(document.querySelectorAll('input[type=number]')).forEach(function(item) {
  item.addEventListener('change', handler.bind("", item));
});

function handler(el) {
  let itemValue = +el.value;

  if(itemValue < 50) {
    el.parentElement.nextSibling.innerHTML = 88;
  } else if (itemValue >= 50 && itemValue <100 ) {
    el.parentElement.nextSibling.innerHTML = 70;
  }
}
<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">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
  <tr><td>Корпус<td>ТТБ<td>Пластик<td><input type="number"><td class="price">88<td class="sum">11</tr>
<p>всего <span id="total"></span></p>
</table>

Ваш ответ

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

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