• 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>
  • 相关阅读:
    Git 分支开发规范
    小程序技术调研
    弹性布局
    vue 自定义指令的魅力
    记一次基于 mpvue 的小程序开发及上线实战
    mpvue学习笔记-之微信小程序数据请求封装
    微信小程序开发框架 Wepy 的使用
    Hbuilder 开发微信小程序的代码高亮
    luogu3807 【模板】 卢卡斯定理
    luogu1955 [NOI2015] 程序自动分析
  • 原文地址:https://www.cnblogs.com/zhang188660586/p/11172188.html
Copyright © 2020-2023  润新知