Js动态生成Table过程中个Tr添加onmouseover事件

var Tr=document.createElement("tr")

Tr.innerHTML="移到这里来!"

Tr.onmouseover=function()

{

this.style.backgroundColor='#e1e8fb'

alert(1)

}

var Table=document.getElementById("table的id")//或者是其他的方式获取的Table对象。

Table.appendChild(Tr)

上面的代码就可以了

动态加入到DOM中的对象无法继承原有的事件，所以无效，举例：

// $.ajax... ajax部分省略

var tr = ""

if(data.length){

    for(var i=0 i<data.length i++){

        tr = '<tr>'

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

    }  

}

// tr的点击事件

$("#table1 tbody").find("tr").click(function(){

    // do something

})

上面的例子中，table1中原有的tr标签有点击事件，而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件，点击无任何反应。解决办法有两种：

纯js方法：将tr的点击事件写成函数，然后为动态创建的tr标签添加该函数的onclick事件：

for(var i=0 i<data.length i++){

        tr = '<tr onclick="OnTrClick()">' // 创建时为tr指定click事件

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

}

jquery方法：jquery中可使用live()、on()两个方法来完成类似效果，其原理是利用事件委派机制，需要注意的是jquery 1.9版本已不再支持live()方法。

// tr的点击事件 (jquery 1.9以下)

$("#table1 tbody").find("tr").live("click", function(){

    // do something

})；

// tr的点击事件【推荐】 (jquery 1.7以上)

$("#table1 tbody").find("tr").on("click", function(){

    // do something

})

---