Изменение значения в памяти массива в таблице JS по клику

Нужно что-бы при клике на ячейку добавлялась единица и соответственно менялась сумма и среднее.
Уже больше недели не могу сделать. Там есть варианты которые пробовал но они не работают.
Нужно на чистом JS.
Спасибо.

А в чем вопрос? Дать готовое решение?

1 симпатия

Нет, так не интересно. Может пример или метод. Потому что вообще не понятно.

1 симпатия

Концепция функций и параметров функций понятна? Потому что проще подсказать направление мышления пример как набор функций.

Да с этим разобрался, когда читал эту статью https://metanit.com/web/javascript/3.1.php.
И я сразу подумал что через это реальнее всего.

Даже без функций.

Один из секретов - придумать такую структуру данных, которая будет моделировать ситуацию из задачи и с которой будет удобно проводить вычисления. Остальное - алгоритмизация вокруг нее.

Пример подхода:

  1. Сгенерировать матрицу данных
  2. Сгенерировать узлы таблицы из матрицы данных, положить их в соответствующие массивы. Некоторые массивы - массивы массивов (или двумерные массивы)
var columnsNodes = [[td, td, td], [td,td,td] ...]
var rowsNodes = [[td,td,td], [td,td,td] ...]
var columnsResultsNodes = [td,td,td]
var rowsResultsNodes = [td,td,td]

2.1 В момент создания узла навесить обработчик клика. В объекте события есть свойство .target - это ссылка на узел по которому кликнули.
Имея эту ссылку, можно найти его какой индекс массива в columnsNodes в который входит узел по которому кликнули. Это не единственный способ получить индекс массива с элементами ряда и колонки. Может найдешь более удобный/понятный тебе.

Этому индексу будет/должна соответствовать ячейка из columnsResultsNodes
innerHTML-ем обновляешь значение ячейки по которой кликнули, пересчитываешь сумму для всего ряда (данные можно брать прямо из дом-узлов. Это проще но менее правильно. Правильно можно научиться потом). Тоже самое для колонки.

Тут могут появиться вопросы по отдельным моментам - например как проверить что элемент входит в массив или как превратить строку в число (когда будешь забирать данные из ячейки таблицы). Пиши их по ходу появления.

Хорошо, спасибо большое.


В JS cтрока 60. Такой вариант имеет право на “жизнь”?

Имеет. В программировании самого правильного ответа нет.

Главный вопрос - как удобно с таким подходом будет считать сумму и обновлять значение ячеек.


В строки 23, 36 и 51 добавил переменные.
Не понимаю вообще как использовать target. Понимаю что можно получить например id, но что потом дальше делать с этим?
И в каком моменте навешивать обработчик события.

createDocumentFragment что это?

Какой у тебя план?

Поэтому нужен план. Наподобие того что я написал тут.

Отталкиваться в плане нужно от того чего нужно в итоге получить, и того какие возможности дает js и DOM.

Вопрос некорректно поставлен. Ты используешь target для чего-то, и это что-то определяется планом.

Обычно это делают после создания узла. Можно чуть позже: создать все узлы, навесить все обработчики. Выбирают в зависимости от того какой код будет проще.

Это создание такого DOM узла, который при вставке вставляет только своих детей. Ниже примеры как будет выглядеть DOM если использовать фрагмент

var df = document.createDocumentFragment()
df.appendChild(document.createElement('div'))
document.body.appendChild(df)
/*
<body>
	<div></div>
</body>
*/

И если оперировать обычными узлами

var div = document.createElement('div')
div.appendChild(document.createElement('div'))
document.body.appendChild(div)
/*
<body>
	<div>
		<div></div>
	</div>
</body>
*/

В коде по ссылке documentFragment использовался неправильно, нужно было бы создавать document.createElenent('table').