JavaScript - cумма чисел в столбце HTML таблицы.
Посчитаем сумму чисел в конкретном столбце HTML таблицы на чистом JavaScript:
HTML
<div> <table id="pricelist"> <tr> <th>Название</th> <th>Цена</th> </tr> <tr> <td>Шарф</td> <td class="quantity">250</td> </tr> <tr> <td>Перчатки</td> <td class="quantity">1300</td> </tr> <tr> <td>Кепка</td> <td class="quantity">600</td> </tr> <tr> <td colspan="2" align="right"> Итого: <span id="total">0</span> </td> </tr> </table> <table id="pricelist2"> <tr> <th>Название</th> <th>Цена</th> </tr> <tr> <td>Шарф</td> <td class="quantity">250</td> </tr> <tr> <td>Перчатки</td> <td class="quantity">1300</td> </tr> <tr> <td>Кепка</td> <td class="quantity">600</td> </tr> <tr> <td colspan="2" align="right"> <button id="totalBtn">Посчитать</button> Итого: <span id="total2">0</span> </td> </tr> </table> </div>
JAVASCRIPT
// автоподсчет данных Таблица 1 var table = document.querySelector('#pricelist'); var tds = table.querySelectorAll('.quantity'); var sum = 0; for (var i = 0; i < tds.length; i++) { sum += Number(tds[i].innerHTML); total.innerHTML = sum; } // подсчет данных по кнопке Таблица 2 var sumBtn = document.querySelector('#totalBtn'); sumBtn.onclick = function() { var table = document.querySelector('#pricelist2'); var tds = table.querySelectorAll('.quantity'); var sum = 0; for (var i = 0; i < tds.length; i++) { sum += Number(tds[i].innerHTML); total2.innerHTML = sum; } }
Пример:
See the Pen JavaScript - cумма чисел в столбце HTML таблицы. by ITwing (@itwing) on CodePen.
Edited by Печенег
0 Comments
Recommended Comments
There are no comments to display.