@Scriptoo

Как подсвечивать строки таблицы без hover, используя события mouseover и mouseout, и style.backgroundColor для подсветки?

var multTable = [];
let table = document.createElement("table")
document.body.append(table)
for(let i = 1; i < 10; i++){
    multTable[i] = [];
    var tr = document.createElement("tr")
    for(let j = 1; j < 10; j++){ 
        multTable[i][j] = i * j;
        var td = document.createElement("td")
        td.innerHTML = multTable[i][j];
        tr.appendChild(td)
    }
    table.appendChild(tr);
}

let tdarr = [...table.querySelectorAll('td')] 


tdarr.forEach(tdOn=>tdOn.onmousemove = function(){
    this.style.backgroundColor = "red"
    this.parentElement.style.backgroundColor = "cyan"  
})

tdarr.forEach(tdOut=>tdOut.onmouseout = function(){
    this.style.backgroundColor = "white"    
})

Я написал такой код, но он не работает как мне нужно.
Сначала, кажется что все нормально
6086ed228673d496992957.jpeg
Но когда веду курсор в сторону происходит это:
6086ed78c5df7263980675.jpeg
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
Avilona
@Avilona
Дело в том, что при mouseout вы окрашиваете ячейку в белый цвет, и хоть цвет строки остается голубым, цвет ячейки находится поверх цвета строки, таким образом происходит то что на скриншоте
попробуйте делать цвет ячейки (и строки тоже) прозрачным при mouseover, например, так https://codepen.io/avilona/pen/yLgwzBR
либо совсем сбрасывать style и строки и ячейки
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы