传承网络文化，缔造精致生活！
联系我们 IT咨询 1356-0066-932 / 147-4811-2363 QQ在线咨询  给我们留言
首页>知识库>jQuery 设置表格隔行变色、隔列变色
 
 
jQuery 设置表格隔行变色、隔列变色

12/14/2010 2:48:30 PM

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>隔行变色、隔列变色</title>       
  5.     <script type="text/javascript" src="jquery.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(function () {  
  8.             $("table:eq(0) tr").each(function () {  
  9.                 $(this).find("td").each(function (i) {  
  10.                      if (i%2 != 0) {  
  11.                          $(this).css("background-color","#CCCCFF");  
  12.                      } else {  
  13.                          $(this).css("background-color","white");  
  14.                      }  
  15.                 });  
  16.             });  
  17.               
  18.             $("table:eq(1) tr").each(function (i) {  
  19.                  if (i%2 != 0) {  
  20.                      $(this).css("background-color","white");  
  21.                  } else {  
  22.                      $(this).css("background-color","#CCCCFF");  
  23.                  }  
  24.             });  
  25.               
  26.             $("table:eq(2)").find("tr:even").css("background-color","white").end().find("tr:odd").css("background-color","#CCCCFF");  
  27.               
  28.             $("table:eq(3) tr").find("td:even").css("background-color","white").end().find("td:odd").css("background-color","#CCCCFF");  
  29.         });  
  30.     </script>  
  31.   </head>  
  32.   <body>  
  33.     <table width="80%">  
  34.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  35.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  36.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  37.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  38.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  39.     </table>  
  40.     <hr />  
  41.     <table width="80%">  
  42.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  43.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  44.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  45.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  46.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  47.     </table>  
  48.     <hr />  
  49.     <table width="80%">  
  50.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  51.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  52.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  53.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  54.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  55.     </table>  
  56.     <hr />  
  57.     <table width="80%">  
  58.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  59.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  60.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  61.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  62.         <tr><td>1</td><td>2</td><td>3</td></tr>  
  63.     </table>  
  64.   </body>  
  65. </html> 
上一遍：JS input 回车提交
下一遍：精选27个励志故事