# Сумма выделенных ячеек HTML таблицы через JavaScript

В уроке показывается, как найти сумму выделенных ячеек HTML таблицы с числами. Выделение ячеек осуществляется кликом мышки: первый клик выделяет ячейку, а второй снимает выделение. Сумма ячеек при этом каждый раз пересчитывается заново.

## Исходники кода

`table td { padding: 20px; border: 1px solid black; } .active { background: red; }` `<table id="table"> <tr> <td>5</td> <td>1</td> <td>7</td> </tr> <tr> <td>4</td> <td>5</td> <td>3</td> </tr> <tr> <td>1</td> <td>8</td> <td>2</td> </tr> </table> <div id="info">0</div>` `var table = document.querySelector('#table'); var info = document.querySelector('#info'); var tds = table.querySelectorAll('td'); for (var i = 0; i < tds.length; i++) { tds[i].addEventListener('click', function() { if (this.classList.contains('active')) { this.classList.remove('active'); } else { this.classList.add('active'); } var activeCells = getActiveCells(table); var sum = getElemsSum(activeCells); showSum(sum, info); }); } function getActiveCells(table) { return table.querySelectorAll('td.active'); } function getElemsSum(elems) { var sum = 0; for (var i = 0; i < elems.length; i++) { sum += Number(elems[i].innerHTML); } return sum; } function showSum(sum, elem) { elem.innerHTML = sum; }`

## Смотрите также

- видео
  колонки и диагонали таблицы на JavaScript
- видео
  сумма рядов таблицы на JavaScript
- видео
  сумма колонок таблицы через селектор JavaScript

← →
↑