jquery隔行换色效果实现方法


Posted in Javascript onJanuary 15, 2015

本文实例讲述了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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
深入理解js promise chain
May 05 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
JavaScript中实现依赖注入的思路分享
Jan 15 #Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 #Javascript
28个常用JavaScript方法集锦
Jan 14 #Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 #Javascript
jquery移动节点实例
Jan 14 #Javascript
jquery获取checkbox的值并post提交
Jan 14 #Javascript
js打造数组转json函数
Jan 14 #Javascript
You might like
php adodb介绍
2009/03/19 PHP
php学习之 数组声明
2011/06/09 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python os.path模块常用方法实例详解
2018/09/16 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python 获取等间隔的数组实例
2019/07/04 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python 函数中的参数类型
2020/02/11 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
python为什么要安装到c盘
2020/07/20 Python
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
小学教师培训方案
2014/06/09 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
铣工实训报告
2014/11/05 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang