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 ui(接口)介绍
Sep 17 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue的for循环使用方法
Feb 12 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
通俗易懂的php防注入代码
2010/04/07 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
nodejs基础应用
2017/02/03 NodeJs
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python 实现矩阵按对角线打印
2019/11/29 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
新闻专业个人求职信
2013/12/19 职场文书
党员个人思想汇报
2013/12/28 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
水浒传读书笔记
2015/06/25 职场文书
周一给客户的问候语
2015/11/10 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript