jquery实现表格奇数偶数行不同样式(有图为证及实现代码)


Posted in Javascript onJanuary 23, 2013

非侵入实现,控制更方便
效果图
jquery实现表格奇数偶数行不同样式(有图为证及实现代码) 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>javascript practice</title> 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
table{width:300px;} 
caption{background:#DCA;} 
th{background:#FCA;width:50%;} 
td{text-align:center;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
odd= {"background":"#EDA","color":"#3F5"};//奇数样式 
even={"background":"#2DA","color":"#875"};//偶数样式 
odd_even("#table_test",odd,even); 
}); 
function odd_even(id,odd,even){ 
$(id).find("tr").each(function(index,element){ 
if(index%2==1) 
$(this).css(odd); 
else 
$(this).css(even); 
}); 
} 
</script> 
</head> 
<body> 
<table id="table_test"> 
<caption>标题<caption> 
<tr> 
<th>name</th> 
<th>age</th> 
</tr> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr> 
<tr> 
<td>张</td> 
<td>李</td> 
</tr> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr> 
<tr> 
<td>张</td> 
<td>李</td> 
</tr> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr> 
<tr> 
<td>张</td> 
<td>李</td> 
</tr> 
<tr> 
<td>张</td> 
<td>李</td> 
</tr> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr></li> 
</body> 
</html>
Javascript 相关文章推荐
jquery随机展示头像代码
Dec 21 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
You might like
php实现文件下载实例分享
2014/06/02 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
js实现简单登录功能的实例代码
2013/11/09 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
JSONP基础知识详解
2017/03/19 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
python executemany的使用及注意事项
2017/03/13 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Python测试模块doctest使用解析
2019/08/10 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python TCP包注入方式
2020/05/05 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python 防止死锁的方法
2020/07/29 Python
安踏官方商城:anta.cn
2019/12/16 全球购物
中秋节礼品促销方案
2014/02/02 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
生日庆典策划方案
2014/06/02 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
商品陈列协议书
2014/09/29 职场文书
人大代表选举标语
2014/10/07 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis