900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > jQuery 设置表格隔行变色 隔列变色

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

时间:2021-05-21 09:00:36

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。