Нужно что-бы при клике на ячейку добавлялась единица и соответственно менялась сумма и среднее.
Уже больше недели не могу сделать. Там есть варианты которые пробовал но они не работают.
Нужно на чистом JS.
Спасибо.
А в чем вопрос? Дать готовое решение?
Нет, так не интересно. Может пример или метод. Потому что вообще не понятно.
Концепция функций и параметров функций понятна? Потому что проще подсказать направление мышления пример как набор функций.
Да с этим разобрался, когда читал эту статью https://metanit.com/web/javascript/3.1.php.
И я сразу подумал что через это реальнее всего.
Даже без функций.
Один из секретов - придумать такую структуру данных, которая будет моделировать ситуацию из задачи и с которой будет удобно проводить вычисления. Остальное - алгоритмизация вокруг нее.
Пример подхода:
- Сгенерировать матрицу данных
- Сгенерировать узлы таблицы из матрицы данных, положить их в соответствующие массивы. Некоторые массивы - массивы массивов (или двумерные массивы)
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')
.