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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
layer 关闭指定弹出层的例子
Sep 25 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP查询网站的PR值
2013/10/30 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
给我一面国旗 python帮你实现
2019/09/30 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
2014年高中教师工作总结
2014/12/19 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
小学美术教学反思
2016/02/17 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书