Подсчёт суммы значений всех ячеек с определённым классом

352

03 марта 2017, 01:01

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

Answer 1

Как то так:

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>

Answer 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>