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升级新版本后选择器的语法问题
Jun 02 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
javascript时区函数介绍
Sep 14 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
Javascript 解构赋值详情
Nov 17 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中使用临时表查询数据的一个例子
2013/02/03 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Saltstack快速入门简单汇总
2016/03/01 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python与R语言的简要对比
2017/11/14 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
甲午风云观后感
2015/06/02 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript