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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
JS 自动安装exe程序
2008/11/30 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
家长给小学生的评语
2014/01/30 职场文书
实习生评语
2014/04/26 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
消防演习通知
2015/04/25 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
英语导游欢迎词
2015/09/30 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js