https://codepen.io/anon/pen/WWBOgY?editors=1012
Нужно при наведении на ячейку таблицы подсветить еще несколько элементов ближайших по значению.
В строке 92 объединил двухмерный массив.
В строке 95 нашел разницу между элементами.
В строке 104 нашел минимальную разницу.
Вижу решение так: У меня есть функция (строка 46) которая подсвечивает ячейку, взять её значение, сортировкой найти ближайшее к ней и тому числу дать класс (строка 122).
Есть значение минимальной разницы, но нет индекса или ссылки на элемент, с которым эта минимальная разница.
Вот псевдокод как подходить к задаче:
// Твои основные структуры данных
// Данные
var arr = [[1, 2, 3],
[4, 5, 6],
[2, 5, 9]]
// DOM узлы, позиция узла соответствует позиции данных которые отображаются в узле
var cells = [[td, td, td],
[td, td, td],
[td, td, td]]
////////////////////////////////////////////////////////////////
function getIndexesOfClosest(arr, row, column) {
// тут алгоритм поиска индексов ряда и колонки для того значения,
// которое ближайшее к значению из ряда row и колонки column
// возвращает массив массивов где значения - это ряд и колонка
// например:
return [[0, 1], [2, 2]]
}
function highlightCells(cellsNodes, arrOfPositions) {
// чисто механика
}
// Общая схема
let tds = []
for (let row = 0; row < arr.length; row += 1) {
let nodesRow = []
for (let column = 0; column < arr[row].length; column += 1) {
const td = ...
// создать td
nodesRow.push(td)
// Внимание! код не будет работать корректно если использовать var вместо let для column и row переменных
// mouseenter и mouseleave не кроссбраузерные события. Реализованы в jquery, например. Но суть передают точно.
td.addEventListener('mouseenter', function () {
highlightCells(tds, getIndexesOfClosest(arr, row, column))
})
td.addEventListener('mouseleave', function () {
// убрать подсветку со всех элементов
})
}
tds.push(nodesRow)
}
1 лайк