тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Сумма выделенных ячеек 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; }

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