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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
vue中render函数的使用详解
Oct 12 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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实现下载文件的两种方法
2013/07/05 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
javascript常见用法总结
2014/05/22 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
一年级班主任感言
2014/03/08 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
产品售后服务承诺书
2014/05/21 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript