首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery兑现表格奇数偶数行不同样式,非入侵实现

2012-09-16 
jquery实现表格奇数偶数行不同样式,非入侵实现非侵入实现,控制更方便效果图:htmlheadmeta http-equiv

jquery实现表格奇数偶数行不同样式,非入侵实现

非侵入实现,控制更方便

效果图:

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>

热点排行