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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
js给selected添加options的方法
May 06 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
Vue通过provide inject实现组件通信
Sep 03 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Anaconda入门使用总结
2018/04/05 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python如何存储数据到json文件
2020/03/09 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
学生会竞选演讲稿
2014/04/24 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
政审证明材料
2015/06/19 职场文书
区域销售大会开幕词
2016/03/04 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
python3操作redis实现List列表实例
2021/08/04 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL