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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
JQuery live函数
Dec 24 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
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 xml实例 留言本
2009/03/20 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
Bootstrap基础学习
2015/06/16 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
一套.net面试题及答案
2016/11/02 面试题
运动会邀请函范文
2014/02/06 职场文书
运动会通讯稿200字
2014/02/16 职场文书
授权委托书怎么写
2014/04/03 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
学生检讨书怎么写
2015/05/07 职场文书
企业计划生育责任书
2015/05/09 职场文书
2016七夕情人节感言
2015/12/09 职场文书
中学教代会开幕词
2016/03/04 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android