编程 Javascript

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版Tab标签切换

Mar 16 Javascript

YUI Compressor压缩JavaScript原理及微优化

Jan 07 Javascript

Highcharts 非常实用的Javascript统计图demo示例

Jul 03 Javascript

JavaScript中使用Substring删除字符串最后一个字符

Nov 03 Javascript

15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

May 25 Javascript

JavaScript运动框架解决防抖动问题、悬浮对联（二）

May 17 Javascript

Bootstrap一款超好用的前端框架

Sep 25 Javascript

jQuery实现的页面遮罩层功能示例【测试可用】

Oct 14 jQuery

jQuery动态移除与增加onclick属性的方法详解

Jun 07 jQuery

electron制作仿制qq聊天界面的示例代码

Nov 26 Javascript

基于vue-cli3和element实现登陆页面

Nov 13 Javascript

Vue实现跑马灯样式文字横向滚动

Nov 23 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