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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
将list转换为json失败的原因
Dec 17 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Webpack之tree-starking 解析
Sep 11 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
小程序自定义轮播图圆点组件
Jun 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
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python web框架中实现原生分页
2019/09/08 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python实现局域网内实时通信代码
2019/12/22 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
书法比赛获奖感言
2014/02/10 职场文书
会计专业自我评价
2014/02/12 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
村党支部公开承诺书
2014/05/29 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python