首页 > 前端工程师手册 > jquery table隔行换色代码

jquery table隔行换色代码

发布-网页培训班 | 浏览量-

 

           >>查看实例

推荐:1.JQuery hover(over,out)函数 使用笔记

          2.十个非常有用的遍历函数

<!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>  
    <title>Hello World jQuery!</title>  
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
    <!--将jQuery引用进来-->  
    <script type="text/javascript">  
        $(document).ready(function(){ //这个就是传说的ready  
            $(".stripe tr").mouseover(function(){  
                //如果鼠标移到class为stripe的表格的tr上时,执行函数  
                $(this).addClass("over");}).mouseout(function(){  
                    //给这行添加class值为over,并且当鼠标一出该行时执行函数  
                    $(this).removeClass("over");}) //移除该行的class  
            $(".stripe tr:even").addClass("alt");  
            //给class为stripe的表格的偶数行添加class值为alt  
        });  
    </script>  
    <style type="text/css">  
th {  
    background:#0066FF;  
    color:#FFFFFF;  
    line-height:20px;  
    height:30px;  
}  
td {  
    padding:6px 11px;  
    border-bottom:1px solid #95bce2;  
    vertical-align:top;  
    text-align:center;  
}  
td * {  
    padding:6px 11px;  
}  
tr.alt td {  
    background:#ecf6fc; /*这行将给所有的tr加上背景色*/ 
}  
tr.over td {  
    background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ 
}  
    </style>  
</head>  
<body style="background-color: #FFF">  
    <table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">  
        <!--用class="stripe"来标识需要使用该效果的表格-->  
        <thead>  
            <tr>  
                <th>姓名</th>  
                <th>年龄</th>  
                <th>QQ</th>  
                <th>Email</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>Java</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>Java@gmail.com</td>  
            </tr>  
            <tr>  
                <td>Javascript</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>Javascript@126.com</td>  
            </tr>  
            <tr>  
                <td>jQuery</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>jquery@gmail.com</td>  
            </tr>  
            <tr>  
                <td>c_cpp</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>c_cpp@gmail.com</td>  
            </tr>  
            <tr>  
                <td>python</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>python@gmail.com</td>  
            </tr>  
            <tr>  
                <td>Ruby</td>  
                <td>23</td>  
                <td>31540205</td>  
                <td>Ruby@gmail.com</td>  
            </tr>  
        </tbody>  
    </table>  
</body>  
</html>

原文地址:http://www.35ui.cn/post/20110901810.html

标签北京网页制作北京网站空间北京做网站网页制作javascriptjQuery教程jquery

上一条: dedecms调用最新文章|dede调用最新文章代码
下一条: 网页禁止右键代码|网页禁止右键使用代码

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码