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>
文章导航