В уроке показывается, как найти сумму выделенных ячеек 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;
}