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>

 

posted @ 2019-07-11 19:37  我叫张小凡  阅读(171)  评论(0)  编辑  收藏  举报