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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
详谈js模块化规范
Jul 07 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
js实现无缝轮播图
Mar 09 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
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php实现微信支付之现金红包
2018/05/30 PHP
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
用Python写一个自动木马程序
2019/09/17 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
运动会跳远加油稿
2014/02/20 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年防汛工作总结
2015/05/15 职场文书
岁月神偷观后感
2015/06/11 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS