Good day.
There is a table in it <td class="sum"> , it is necessary to calculate the sum of all these cells.
Also tell me how to implement a change in the value of the cell Price <td class="price"> depending on the value of the entered number in the <input> field, for example, to 50 = 88, from 50 to 100 = 70
Thank you in advance.
https://jsfiddle.net/Dumb/3xLrrdws/3/

  • I think it is better to do it not in html, but on the server side. If it's all on js, then the table has rows , and nextSibling you can find the cells through nextSibling . - nick_n_a
  • It is more logical to count the sum of the cell values ​​in the browser on js, and you don’t really need to look for cells: the necessary cells have their own class 'sum'. I just don’t know how to calculate all cells with a certain class on js - Dumb

2 answers 2

Something like this:

 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>

    Amount:

     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>

    Replacing values ​​depending on the input to 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>