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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
js实现密码强度检验
Jan 15 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
ThinkPHP写第一个模块应用
2012/02/20 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Javascript 类型转换方法
2010/10/24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python运算符重载用法实例分析
2015/06/01 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python write无法写入文件的解决方法
2019/01/23 Python
详解python中的模块及包导入
2019/08/30 Python
Python3运算符常见用法分析
2020/02/14 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python中线程和进程有何区别
2020/06/17 Python
Python 内存管理机制全面分析
2021/01/16 Python
小区停车场管理制度
2014/01/27 职场文书
函授药学自我鉴定
2014/02/07 职场文书
公司授权委托书
2014/04/04 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Golang 结构体数据集合
2022/04/22 Golang