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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
vue实现分页组件
Jun 16 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
PHP实现文件上传与下载
2020/08/28 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python读取注册表中值的方法
2013/04/08 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
优秀干部获奖感言
2014/01/31 职场文书
八一慰问活动方案
2014/02/07 职场文书
小班开学寄语
2014/04/04 职场文书
倡议书格式范文
2014/04/14 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
贷款担保书范本
2015/09/22 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android