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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
js验证表单大全
2006/11/25 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
layui文件上传实现代码
2017/05/20 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
深入浅析python 协程与go协程的区别
2019/05/09 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python多进程间通信代码实例
2019/09/30 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
数控专业应届生求职信
2013/11/27 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
大学生个人事迹材料
2014/01/21 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
汉语言文学职业规划
2014/02/14 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
小学二年级语文教学反思
2016/03/03 职场文书