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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Bootstrap布局方式详解
May 27 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 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对象在内存中的存在形式分析
2015/02/03 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python和c语言的主要区别总结
2019/07/07 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
.net面试题
2016/09/17 面试题
幼儿园消防安全制度
2014/01/26 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
2014国庆节标语口号
2014/09/19 职场文书
租房协议书范例
2014/10/14 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
先进党员事迹材料
2014/12/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
mysql全面解析json/数组
2022/07/07 MySQL