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

发布于 2025-02-25 12:38:56 字数 3592 浏览 0 评论 0 收藏 0

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。