Question

I’m trying to insert an onmouseover when creating new rows within my table however it’s not appearing. Am I missing something stupid?

    var row = document.createElement("TR");
    row.id = i;
    row.onmouseover = hover(i);
    var td1 = document.createElement("TD");
    row.appendChild(td1);
    tbody.appendChild(row);

The variable ‘i’ is the current number in the loop. The ID of the row appears fine, but not the onmouseover.

Answer 1

Use an anonymous function to create a closure for the value of i, and make sure you’re setting a function to onmouseover, rather than the result of calling a function:

var row = document.createElement("TR");
(function (i) {
    row.onmouseover = function () { hover(i) };
})(row.id);
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);

---

Taking a proper look at your code, it appears that you’re not actually setting the id attribute of the TR element. However, you might want to avoid that entirely and use this context inside the hover function:

var row = document.createElement("TR");
row.onmouseover = hover;
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);

function hover() { 
    alert(this.rowIndex);  // <-- `this` refers to the row element
}