• JS学习笔记之给表格隔行换色


    这个小demo主要是涉及到了通过表格id获取其内部元素的方法,同时改变其元素

    直接上代码:

    html:

     1 <table border="1px solid red" cellspacing="0px" id="tbl">
     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             </tbody>
    79         </table>
    80         <input type="button" onclick="show();" />

    JS代码:

     1 <script type="text/javascript">
     2             function show() {
     3                 var tbEle = document.getElementById("tbl");
     4                 var len = tbEle.tBodies[0].rows.length;
     5                 var i;
     6                 for (i = 0; i < len; i++) {
     7 
     8 
     9                     if (i % 2 == 0) {
    10                         tbEle.tBodies[0].rows[i].style.background = "gold";
    11                     } else {
    12                         tbEle.tBodies[0].rows[i].style.background = "pink";
    13                     }
    14                 }
    15             }
    16         </script>
  • 相关阅读:
    Curling 2.0
    POJ
    免费馅饼
    每日一九度之 题目1090:路径打印
    每日一九度之 题目1089:数字反转
    每日一九度之 题目1084:整数拆分
    每日一九度之 题目1083:特殊乘法
    每日一九度之 题目1081:递推数列
    每日一九度之 题目1079:手机键盘
    每日一九度之 题目1077:最大序列和
  • 原文地址:https://www.cnblogs.com/zhang188660586/p/11172188.html
Copyright © 2020-2023  润新知