0

The mouseenter and mouseleave event occurs only the first time, if I redo the event, nothing happens. Only javascript becouse i can't use jquery.

This is my code, when I mouseenter the table, the cicle for has to change the cell of the row which I'm moving the mouse on, but it only works the first time.

table.addEventListener('mouseenter', function() {
    for (var i = 0; i<table.rows.length; i++){
        Array.from(table.rows).forEach(e => {e.addEventListener('mouseenter', function(e){
            this.style.border = "1px solid black";
            });
          })
        })
        Array.from(table.rows).forEach(e => {e.addEventListener('mouseleave', function(e){
            this.cells[0].style.pointerEvents = "none";
            this.cells[1].style.pointerEvents = "none";
            this.cells[2].style.pointerEvents = "none";
            this.cells[3].style.pointerEvents = "none";
            this.cells[4].style.pointerEvents = "none";
            this.cells[5].style.pointerEvents = "none";
            this.cells[6].style.pointerEvents = "none";
            this.cells[7].style.pointerEvents = "none";
            this.cells[4].innerHTML = '';
            this.cells[5].innerHTML = '';
            this.cells[6].innerHTML = '';
            this.cells[7].innerHTML = '';
            });
       })
})

This is how i create the row with the cell, righeTotali it's used for creating the row. In my html i only create a table with the class table.

let table = document.querySelector('.table');

var righeTotali = table.rows.length-1;

function aggiungiMessaggio(righeTotali) {
        var newRow = table.insertRow(righeTotali);
        newRow.style.width = "100%";
        newRow.style.height = "60px";
        var cell1 = newRow.insertCell(0);
        var cell2 = newRow.insertCell(1);
        cell2.style.paddingLeft = "10px";
        var cell3 = newRow.insertCell(2);
        cell3.style.width = "200px";
        cell3.style.paddingLeft = "10px";
        var cell4 = newRow.insertCell(3);
        cell4.style.width = "630px";
        cell4.style.paddingLeft = "10px";
        newRow.insertCell(4);
        newRow.insertCell(5);
        newRow.insertCell(6);
        var cell8 = newRow.insertCell(7);
        cell8.style.paddingLeft = "10px";
}
Joel Maurizio
  • 1
  • check if your table is selected properly or it may have tbody or thead. need more info for resolution – mzaifquraishi Nov 11 '22 at 13:10
  • You're setting pointer-events to none, mouseenter is a pointer event. Also, don't add event listeners in an event listener, every time you hover over the table your code adds new listeners to the table elements. When working with tables, [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) saves you from a ton of troubles. – Teemu Nov 11 '22 at 13:14

0 Answers0