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 相关文章推荐
javascript获取选中的文本的方法代码
Oct 30 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
JS异步宏队列微队列原理详解
Sep 09 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
xml和web特殊字符
2009/04/28 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JS不间断向上滚动效果代码
2013/12/25 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python Web服务器Tornado使用小结
2014/05/06 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python+opencv实现动态物体追踪
2018/01/09 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
后勤人员自我鉴定
2013/10/20 职场文书
个性车贴标语
2014/06/24 职场文书
一般党员对照检查材料
2014/09/24 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
golang中的空接口使用详解
2021/03/30 Python
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python