PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    jQuery 实现隔行变色

    作者:admin来源:B5教程网浏览:时间:2020-09-30 00:07:50我要评论
    导读:(1)功能描述在页面中,通过一个<table>标记展示数据列表信息,在元素标记中,奇数行与偶数行的背景色不同,从而实现隔行变色的页面展示效
    (1)功能描述
    在页面中,通过一个<table>标记展示数据列表信息,在元素标记中,奇数行与偶数行的背景色不同,从而实现隔行变色的页面展示效果。
    (2)实现代码
    使用jquery实现该页面功能。新建一个HTML文件2-1.html。
    <!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>使用jQuery选择器实现隔行变色</title>
    <script language="javascript" type="text/javascript" 
    src="http://www.bcty365.com/statics/js/bcty365_js/jquery.min.js"></script>
    <style type="text/css">
    body{font-size:12px;text-align:center}
    #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
    #tbStu tr{line-height:23px}
    #tbStu tr th{background-color:#ccc;color:#fff}
    #tbStu .trOdd{background-color:#fff}
    </style>
    <script type="text/javascript">
    $(function(){
    $("#tbStu tr:nth-child(even)").addClass("trOdd");
    })
    </script>
    </head>
    <body>
    <table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!--奇数偶-->
    <tr>
    <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数偶-->
    <tr>
    <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
    <tr>
    <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数偶-->
    <tr>
    <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
    <tr>
    <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数偶-->
    <tr>
    <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
    <!--...-->
    </tbody>
    </table>
    </body>
    </html>
    (3)效果图如下:
    jQuery 实现隔行变色
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-45-1.html
    相关热词搜索: jquery 隔行变色