Перейти к содержанию

JavaScript - cумма чисел в столбце HTML таблицы.


Печенег

2053 просмотра

 Поделиться

Посчитаем сумму чисел в конкретном столбце 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.

Изменено пользователем Печенег

 Поделиться

0 Комментариев


Рекомендуемые комментарии

Комментариев нет

Гость
Добавить комментарий...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Общий чат

Введите ваше имя

×
×
  • Создать...

Важная информация

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Политика конфиденциальности и Правила, в ином случаи просто покиньте его.