• jQ学习之实现表格的隔行换色


    一:运用之前博客中提到的基础知识,然后具体操作在注释里了,比较简单直接上代码

    html:

     1     <table border="1px solid red" cellspacing="0px" id="tbl" align="center" style="text-align: center;">
     2             <tbody>
     3                 <tr>
     4                     <td>
     5                         姓名
     6                     </td>
     7 
     8                     <td>
     9                         <span style="color: red;">
    10                             *
    11                         </span>
    12                         <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" />
    13                         <span id="userNameSpan" style="color: gray; display: none;">
    14                         </span>
    15                     </td>
    16                 </tr>
    17 
    18                 <tr>
    19                     <td>
    20                         年龄
    21                     </td>
    22 
    23                     <td>
    24                         <span style="color: red;">
    25                             *
    26                         </span>
    27                         <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" />
    28                         <span id="ageSpan" style="color: gray; display: none;">
    29 
    30                         </span>
    31                     </td>
    32                 </tr>
    33                 <tr>
    34                     <td>
    35                         账号
    36                     </td>
    37 
    38                     <td>
    39                         <span style="color: red;">
    40                             *
    41                         </span>
    42                         <input type="text" name="userNumber" id="userNumber" />
    43                         <span id="userNumberSpan">
    44 
    45                         </span>
    46                     </td>
    47                 </tr>
    48                 <tr>
    49                     <td>
    50                         密码
    51                     </td>
    52 
    53                     <td>
    54                         <span style="color: red;">
    55                             *
    56                         </span>
    57                         <input type="password" name="password" id="password" />
    58                         <span id="passwordSpan">
    59 
    60                         </span>
    61                     </td>
    62                 </tr>
    63                 <tr>
    64                     <td>
    65                         再次输入密码
    66                     </td>
    67 
    68                     <td>
    69                         <span style="color: red;">
    70                             *
    71                         </span>
    72                         <input type="password" name="repassword" id="repassword" />
    73                         <span id="repasswordSpan">
    74 
    75                         </span>
    76                     </td>
    77                 </tr>
    78                 <tr>
    79                     <td colspan="2">
    80                 <input type="button" value="点我换色" id="changeColor" />
    81                 </td>
    82                 </tr>
    83             </tbody>
    84             
    85         </table>

    jQ代码:

        $(function(){
                    $("#changeColor").click(function(){
                        //一般采用美工写的css代码,先link然后用addclass方法调用
                        $("tbody tr:even").css("backgroundColor","gold");
                        $("tbody tr:odd").css("backgroundColor","pink");
                    })
                })
  • 相关阅读:
    325日报
    323日报
    Http请求种类
    http1.1和1.0的区别
    Java EE常用名词
    USEA、HASA、ISA
    基本类型及其封装类型的 == 和 equals()
    AOP中的连接点(Joinpoint)、切点(Pointcut)、增强(Advice)、引介(Introduction)、织入(Weaving)、切面(Aspect)
    B树和B+树
    DNS的寻址过程
  • 原文地址:https://www.cnblogs.com/zhang188660586/p/11186346.html
Copyright © 2020-2023  润新知