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选择器原理介绍($()使用方法)
Mar 25 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Node.js实现数据推送
Apr 14 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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抽象类 介绍
2012/06/13 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python生成ppt的方法
2018/06/07 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python中pow函数用法及功能说明
2020/12/04 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
人事专员的职责
2014/02/26 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
教师考核评语大全
2014/12/31 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL