Сложение значений ячеек в таблице

Question

Подскажите, пожалуйста, с чего начать: Необходимо создать таблицу (Колонки - это даты из диапазона дат,строки - это допустим время выхода), каждая ячейка содержит какое-то числовое значение (например 20). Теперь при нажатии на РАЗНЫЕ ячейки нужно, чтобы внизу таблицы появлялась сумма и увеличивалась с каждым кликом или уменьшалась кликнув на ту же ячейку.

Answer 1

С чего начать

Нужна переменная, которая будет хранить текущую сумму;
Надо научиться при клике получать число;
Уметь превращать число в отрицательное, если ячейка уже была выбрана;
"Выбранность" ячейки можно определять добавлением/удалением класса.

Вместе это выглядит примерно так:

let sum = 0;

document.querySelectorAll('.js-count').forEach(cell => { // См. "Стрелочные функции"
  cell.addEventListener('click', function() {
    // Функция вызывается в контексте `cell`. Здесь this === cell (кликнутая ячейка)

    const num = Number(this.textContent);
    // textContent - строка. Важно его сразу превращать в число.
    //    num = +this.textContent; // Унарный плюс делает то же самое.
    
    sum += ( this.classList.contains('counted') ? -num : num ); // См. "Тернарный оператор"
    document.getElementById('result').textContent = "Сумма: " + sum; 
    
    this.classList.toggle('counted');
  });
});

table { border-collapse: collapse; }

td {
  width: 100px;
  padding: 4px;
  text-align: center;
  border: 1px solid #999;
  cursor: pointer;
  user-select: none;
}

td:hover { background-color: #ddd; }

.js-count.counted {
  background-color: #169;
  color: white;
}

<table>
  <tr>
    <td>a</td>
    <td class="js-count">10</td>
  </tr>
  <tr>
    <td>b</td>
    <td class="js-count">20</td>
  </tr>
  <tr>
    <td>c</td>
    <td class="js-count">30</td>
  </tr>
</table>

<p id="result"></p>

БЛОГ НА HUSL

Сложение значений ячеек в таблице

Ответы (1 шт):