table 鼠标悬停效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

table 鼠标悬停效果

html[html.length] = '<table id="tablelist" cellpadding="0" cellspacing="1" border="0">';
    for (i = 0, len = 1000; i < len; i += 1) {
        html.push("<tr><td>1<td>2<td>3<td>1<td>2<td>3<td>1<td>2<td>3<td>1<td>2<td>3<td>1<td>2<td>3");
    }
    html[html.length] = "";
    container.innerHTML = html.join('');

table = doc.getElementById("tablelist");

addListener(table, "mouseover", function (e) {
		e = e || window.event;
		var elem = e.target || e.srcElement,
			name = elem.nodeName;
		if(name === "TD"){
			elem = elem.parentNode;
			name = elem.nodeName;
		}
		setTimeout(function(){
			if(name === "TR"&&elem.className.indexOf('h')<0){
				elem.className = "hover";
			}			
		},0);
		
	});
	addListener(table, "mouseout", function (e) {
		e = e || window.event;
		var elem = e.target || e.srcElement,
			name = elem.nodeName;
		if(name === "TD"){
			elem = elem.parentNode;
			name = elem.nodeName;
		}
		setTimeout(function(){
			if(name === "TR"&&elem.className.indexOf('h')>=0){
				elem.className = "";
			}			
		},0);

});
    /*for (i = 0, len = table.rows.length; i < len; i += 1) {
        (function(item){
            addListener(item, "mouseover", function () {
                item.className = "hover";
            });
            addListener(item, "mouseout", function () {
                item.className = "";
            });
        })(table.rows[i]);
    }*/
</script>

提示：您可以先修改部分代码再运行

table 鼠标悬停效果

相关文章

精彩推荐