Jump to content

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


Печенег

2337 views

 Share

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

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

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