Найти ближайшие по значению из массива данных при наведении на ячейку таблицы

Вопрос-ответ JavaScript
1

https://codepen.io/anon/pen/WWBOgY?editors=1012
Нужно при наведении на ячейку таблицы подсветить еще несколько элементов ближайших по значению.
В строке 92 объединил двухмерный массив.
В строке 95 нашел разницу между элементами.
В строке 104 нашел минимальную разницу.
Вижу решение так: У меня есть функция (строка 46) которая подсвечивает ячейку, взять её значение, сортировкой найти ближайшее к ней и тому числу дать класс (строка 122).

2

Есть значение минимальной разницы, но нет индекса или ссылки на элемент, с которым эта минимальная разница.

Вот псевдокод как подходить к задаче:

// Твои основные структуры данных
// Данные
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 лайк