jquery隔行换色效果实现方法
更新时间：2015年01月15日 10:35:00 投稿：shichen2014
这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery隔行换色效果实现方法。分享给大家供大家参考。具体分析如下：
使用 jquery 来实现隔行换行的效果，简单得就跟吃饭一样。来吧，看看代码到底有多么的简单
复制代码 代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#stu tr:even").addClass("bg");
$("#stu tr:odd").addClass("bg1");
});
</script>
<style type="text/css">
#stu{width:300px;border:solid 1px green;border-spacing:0px;}
#stu th{background:#ccc;}
.bg{background:blue;}
.bg1{background:yellow;}
</style>
</head>
<body>
<table id="stu">
<tr><th>学号</th><th>姓名</th><th>专业</th></tr>
<tr><td>0812124</td><td>羊羊羊</td><td>生物工程</td></tr>
<tr><td>0812120</td><td>燕燕燕</td><td>软件工程</td></tr>
<tr><td>0812124</td><td>王美人</td><td>计算机</td></tr>
<tr><td>0812124</td><td>海飞丝</td><td>商务英语</td></tr>
<tr><td>0812124</td><td>宋夫人</td><td>药物研究</td></tr>
</table>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#stu tr:even").addClass("bg");
$("#stu tr:odd").addClass("bg1");
});
</script>
<style type="text/css">
#stu{width:300px;border:solid 1px green;border-spacing:0px;}
#stu th{background:#ccc;}
.bg{background:blue;}
.bg1{background:yellow;}
</style>
</head>
<body>
<table id="stu">
<tr><th>学号</th><th>姓名</th><th>专业</th></tr>
<tr><td>0812124</td><td>羊羊羊</td><td>生物工程</td></tr>
<tr><td>0812120</td><td>燕燕燕</td><td>软件工程</td></tr>
<tr><td>0812124</td><td>王美人</td><td>计算机</td></tr>
<tr><td>0812124</td><td>海飞丝</td><td>商务英语</td></tr>
<tr><td>0812124</td><td>宋夫人</td><td>药物研究</td></tr>
</table>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
由于ASP.NET网页运行后，服务器控件会随机生成客户端id，jquery获取时候不太好操作,下面为大家整理了三种方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
JQuery元素属性控制2009-07-07
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
jquery-slider幻灯片插件通过json数据来提供图片地址和描述信息，同时也可以更换json数据来动态切换不同的图片，对json数据jquery幻灯片插件相关知识感兴趣的朋友一起学习吧2016-08-08
如果对于jquery的$()包装器函数还不是很清楚，请先参阅我的上一篇日志：浅析jQuery的链式调用2010-12-12
这篇文章主要介绍了JavaScript实现的滚动公告特效,结合完整实例形式详细分析了基于jQuery实现的页面元素间歇修改,最终达到滚动公告效果的相关操作技巧,需要的朋友可以参考下2019-07-07
设置按钮停顿3秒不可用的方法有很多，下面为大家介绍下使用jquery是如何实现的2014-03-03
这篇文章主要介绍了jquery高级编程的最佳实践详解,学习JQ的朋友一定需要这个，参考下吧2014-03-03
这篇文章主要为大家详细介绍了如何利用jquery结合json实现分页效果，感兴趣的小伙伴们可以参考一下2016-03-03
得到当前页面高度和宽度的两个函数2010-02-02
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
在园子里面看到kuibono的文章说JQuery不会自动回收xmlHttpRequest对象，并且在每次Ajax请求之后都会创建一个新的xmlHttpRequest对象，感到惊讶，索性写了一个程序验正了一下，果然如kuibono所言2012-06-06
最新评论