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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
JavaScript闭包详解
Feb 02 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
angular实现商品筛选功能
Feb 01 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
Vue.js标签页组件使用方法详解
Oct 19 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
全面了解python字符串和字典
2016/07/07 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python 统计字数的思路详解
2018/05/08 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python爬虫超时的处理的实例
2018/12/19 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
pandas按条件筛选数据的实现
2021/02/20 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
优秀班主任材料
2014/12/16 职场文书
保研推荐信范文
2015/03/25 职场文书
国情备忘录观后感
2015/06/04 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript