Как я могу изменить цвет фона строки и столбца при наведении курсора на элемент таблицы?

Question

большой проблемой было изменить цвет фона столбца, потому что столбцы не являются элементом на HTML.

Answer 1

Я решил эту проблему с помощью простого tr: hover, чтобы изменить цвет фона строки и некоторого кода javascript для решения проблемы цвета столбца.

Первый этап (CSS): // изменить цвет фона из строки при наведении.

tr:hover{
 background: #414141;
}

Второй этап (JavaScript): // меняем цвет фона из столбца при наведении.

let items = document.querySelectorAll('td')
let rows = document.querySelectorAll('tr')

items.forEach(function(item){
    item.onmouseover = function(){
        rows.forEach(function(row){
            if (row.rowIndex != 0){
                row.children[item.cellIndex].style.background = '#393939'
            }
        })
    }
    item.onmouseout = function(){
        rows.forEach(function(row){
            if (row.rowIndex != 0){
                row.children[item.cellIndex].style.background = '#414141'
            }
        })
    }
})

Это решение сработало, но когда я меняю свойство стиля, кажется, что теряется свойство зависания этого элемента. Итак, я создал словарь для сохранения стиля элемента.

Третий этап (JavaScript): // меняем цвет фона из столбца при наведении курсора. Без потери каких-либо свойств стиля:

let items = document.querySelectorAll('td')
let rows = document.querySelectorAll('tr')
var aux = {}

items.forEach(function(item){
    item.onmouseover = function(){
        rows.forEach(function(row){
            if (row.rowIndex != 0){
                aux[item.cellIndex] = row.children[item.cellIndex].style
                row.children[item.cellIndex].style.background = '#393939'
            }
        })
    }
    item.onmouseout = function(){
        rows.forEach(function(row){
            if (row.rowIndex != 0){
                row.children[item.cellIndex].style = aux[item.cellIndex]
            }
        })
    }
})

Я не знаю, лучший ли это способ решить проблему, но мне это помогло. Скажите, если вы получили это по-другому.