zoukankan      html  css  js  c++  java
  • jquery选择器

    实现隔行变色案例:

     1 <!doctype html>
     2 <html lang="en">
     3  <head>
     4   <meta charset="UTF-8">
     5   <meta name="Generator" content="EditPlus®">
     6   <meta name="Author" content="">
     7   <meta name="Keywords" content="">
     8   <meta name="Description" content="">
     9   <title>隔行变色的商品列表</title>
    10      <link rel="stylesheet" href="css/product.css">
    11      <script type="text/javascript"src="js/jquery-1.12.4.js"></script>
    12      <script type="text/javascript">
    13          $(function(){
    14              $("tr:odd").css("background","#EFF7D0")  //奇数
    15              $("tr:even").css("background","#F7E195") //偶数
    16          });
    17          
    18      </script>
    19  </head>
    20  <body>
    21     <div class="contain">
    22         <table border="0" width="100%" cellspacing="0">
    23             <tr class="t-head">
    24                 <th width="50%">商品</th>
    25                 <th width="10%">单价</th>
    26                 <th width="10%">数量</th>
    27                 <th>操作</th>
    28             </tr>
    29             <tr>
    30                 <td>
    31                     <img src="images/f1.jpg" width="50" height="50"/>
    32                     <a href="">丹幕妮通勤波点印花毛衣</a>
    33                 </td>
    34                 <td>180.0</td>
    35                 <td>3</td>
    36                 <td><a href="javascript:void(0);" id="del">删除</a></td>
    37             </tr>
    38             <tr>
    39                 <td>
    40                     <img src="images/f2.jpg" width="50" height="50"/>
    41                     <a href="">预售太平洋女装连衣裙</a>
    42                 </td>
    43                 <td>765.0</td>
    44                 <td>4</td>
    45                 <td><a href="javascript:void(0);" id="del">删除</a></td>
    46             </tr>
    47             <tr>
    48                 <td>
    49                     <img src="images/f3.jpg" width="50" height="50"/>
    50                     <a href="">丹幕妮通勤红色小外套</a>
    51                 </td>
    52                 <td>456.0</td>
    53                 <td>2</td>
    54                 <td><a href="javascript:void(0);" id="del">删除</a></td>
    55             </tr>
    56             <tr>
    57                 <td>
    58                     <img src="images/f4.jpg" width="50" height="50"/>
    59                     <a href="">漫巴森秋装新款套头衫</a>
    60                 </td>
    61                 <td>140.0</td>
    62                 <td>1</td>
    63                 <td><a href="javascript:void(0);" id="del">删除</a></td>
    64             </tr>
    65         </table>
    66     </div>
    67  </body>
    68 </html>

    执行结果

  • 相关阅读:
    移动 WEB 开发布局方式 ---- flex 布局
    使用 flex布局 制作携程网首页
    移动 WEB 开发布局方式 ---- rem 适配布局
    使用 flexible.js + rem 制作苏宁移动端首页
    移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作
    移动 WEB 开发的布局方式 ---- 响应式布局
    简述 JavaScript 的执行机制
    vuex 的使用详解
    .Net Core — 依赖注入
    .NET Core +Angular 项目 部署到CentOS
  • 原文地址:https://www.cnblogs.com/liutao1122/p/6811901.html
Copyright © 2011-2022 走看看