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 相关文章推荐
Extjs单独定义各组件的实例代码
Jun 25 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
小程序实现录音上传功能
Nov 22 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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制作图型计数器的例子
2006/10/09 PHP
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
python3 shelve模块的详解
2017/07/08 Python
django admin组件使用方法详解
2019/07/19 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python字典按照value排序方法
2020/12/28 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
干部选拔任用方案
2014/05/26 职场文书
预防煤气中毒方案
2014/06/16 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
2014年人事科工作总结
2014/11/19 职场文书
现场施工员岗位职责
2015/04/11 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
JavaScript函数柯里化
2021/11/07 Javascript