欢迎来到概念建站建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

table鼠标悬停效果

       建站、设计教程     2016-03-01     概念网络     165     0    

table 鼠标悬停效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

    table{width:100%;background-color:#fff;}

    table td{background-color:#ccc;padding:5px;}

    table tr.hover td{background-color:Green;}

</style>

</head>

<body>

<div id="container">

</div>

<script type="text/javascript">


    var doc = document,

        container = doc.getElementById("container"),

        html = [],

        table, i, len;

        

    var addListener = function () {

        if (window.addEventListener) {

            return function (el, sType, fn, capture) {

                el.addEventListener(sType, fn, (capture));

            };

        } else if (window.attachEvent) {

            return function (el, sType, fn, capture) {

                el.attachEvent("on" + sType, fn);

            };

        } else {

            return function () { };

        }

    } ();


    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><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td></tr>");

    }

    html[html.length] = "</table>";

    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>

</body>

</html>


--结束END--

本文链接: http://www.gncms.cn/station/resources/1988.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“概念建站”
"概念建站平台前端开发教学"
每日干货技术分享
 

×

成为 概念建站平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

概念建站平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 601526061

客服电话: 18651068070

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

概念建站平台手机端