jQuery 设置表格隔行变色、隔列变色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>隔行变色、隔列变色</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function () { $("table:eq(0) tr").each(function () { $(this).find("td").each(function (i) { if (i%2 != 0) { $(this).css("background-color","#CCCCFF"); } else { $(this).css("background-color","white"); } }); }); $("table:eq(1) tr").each(function (i) { if (i%2 != 0) { $(this).css("background-color","white"); } else { $(this).css("background-color","#CCCCFF"); } }); $("table:eq(2)").find("tr:even").css("background-color","white").end().find("tr:odd").css("background-color","#CCCCFF"); $("table:eq(3) tr").find("td:even").css("background-color","white").end().find("td:odd").css("background-color","#CCCCFF"); }); </script> </head> <body> <table width="80%"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <hr /> <table width="80%"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <hr /> <table width="80%"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <hr /> <table width="80%"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> </body> </html>

转载于:https://www.cnblogs.com/javaTest/archive/2010/06/18/2589424.html

jQuery 设置表格隔行变色、隔列变色相关推荐

html table隔行变色,使用CSS3实现表格隔行/隔列变色
废话少说,先看效果,如果不是你想要的,你可以撤了~ 这些都是css控制的,然后我们看下样式: table tr:nth-child(odd){background:#F4F4F4;} table td ...
table表格，隔行，格列变色
隔行变色每隔奇数行变色一次 tr:nth-child(odd) {background-color: #eee; } 每隔偶数行变色一次 tr:nth-child(even) {backgr ...
Excel中CTRL+D的别样用法隔行和隔列向下填充示例
我们熟悉的CTRL+D是这样用的:选取字符和下面的空格,按CTRL+D就可以完成字符的向下填充. 我可以直接向下拖动复制,何必用CTRL+D呢? 其实,你太小看CTRL+D了. [例1]在下面的表格中 ...
灵活设置表格的某一列颜色
最近正在复习关于HTML的视频,以前觉得自己对HTML中的表格问题领悟很深,今天突然学到新的知识,深感惭愧.有时候在做报表的时候,想要设置某一列的颜色,如果当表格的列数或者行数不多时,可以一一设置,但 ...
[原创]持续给力：jQuery实现表格隔行变色效果案例详解
本案例源码 jQeruy20110323.rar 由于这几天忙着给学生出卷.测试等相关工作,导致这几天博客没有更新太多的东西,从本周开始我会持续的原创一些jQuery方面的文章,也请大家继续关注,我的 ...
php表格弄成隔两行变色,Excel表格实现隔行填充背景颜色的三种方法
Excel表格很多行的时候,为了避免看错行,我们可以设置成隔行填充背景颜色.那么除了一行一行手动设置,还可以怎么操作呢? 软件推荐一:[office 2007] 软件推荐二:[office 2013] ...
element表格点击某一单元格，当前列变色，列变色
今天,天气晴朗,北风4-5级今天,项目中有个需求,使用element表格的时候,当我点击表格中的某一个单元格的时候,当前单元格所在的列变色,以下是实现列变色办法首先table添加以下属性 2.方法 ...
jQuery实现表格隔行换颜色：
jQuery实现表格各行换颜色: 截图如下: 代码如下: <span style="font-family:Microsoft YaHei;font-size:14px;"& ...
html设置表格行高和列宽,怎么在腾讯文档中设置表格的行高和列宽
摘要腾兴网为您分享:怎么在腾讯文档中设置表格的行高和列宽,云集,虚拟机,我的世界,卫星云图等软件知识,以及cad2009,kmp,mt4,usb转串口驱动,wifi吸粉,csgo动态组名,亿方云,单 ...

jQuery 设置表格隔行变色、隔列变色

jQuery 设置表格隔行变色、隔列变色相关推荐

最新文章

热门文章