DOM onmouseoverが表示されない

Question

テーブル内に新しい行を作成するときにonmouseoverを挿入しようとしていますが、表示されません。私は何か愚かな行方不明ですか？

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

変数 'i'はループ内の現在の番号です。行のIDは正常に表示されますが、オンマウスオーバーは表示されません。

Answer 1

はiの値のためのクロージャを作成するために、匿名関数を使用し、あなたがonmouseoverに機能を設定していることを確認してくださいではなく、関数を呼び出した結果：あなたのコードで適切な表情を撮影

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); 

---

、あなたが実際にを設定していないことが表示されますTR要素の属性。しかし、あなたは完全にそれを回避し、ホバー関数内 thisコンテキストを使用する場合があります

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 
} 

Answer 2

多分試してみてください。

row.onmouseover = function() { hover(i); }; 

Answer 3

あなたはイベントに関数の結果を代入しています。

は

row.onmouseover=function(){hover(this);} 

のようなものにする必要があり、あなたはDOMオブジェクトを持っているし、何かをルックアップする必要はありませんので、これを使用することをお勧めします。

function hover(row){ 
    row.style.color = "red"; 
} 

私のやり方はまだ分かっていれば、あなたのIDを変更して有効にする必要があります。 IDは数字で始めることはできません。

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