JS学习第三课

  1. 写表格时最好自己写上<tbody>，因为在JS里面要用，要不然html里没有，但是我们在JS里面用得飞起，也说不过去啊。
  2. 获取表格元素时，tBodis[0]一定要加上，本人试过不加，然后就没有然后了。记住这几个表格的快捷标签tBodis，rows，cells。
  3. 隔行变色：用的是这个小Tip哦--if（i%2)能否被2整除，相当方便。
  4. 用一个变量来储存某个元素原来的属性，让该元素经过一系列变化后还能回到原来的属性。这里用了oldColor来储存原来的颜色，在鼠标移出之后，加上它，就会让这行本来是灰色的表格再变回灰色。 
     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             window.onload=function(){
 8                 var oTab=document.getElementById('tab1')
 9                 var oldColor=''
10                 for(i=0;i<oTab.tBodies[0].rows.length;i++){
11                                     oTab.tBodies[0].rows[i].onmouseover=function(){
12                                         oldColor=this.style.background
13                     this.style.background='orange';}
14                                     oTab.tBodies[0].rows[i].onmouseout=function(){
15                     this.style.background=oldColor;
16                 }
17                     if(i%2){
18                         oTab.tBodies[0].rows[i].style.background=''
19                     }
20                     else{
21                         oTab.tBodies[0].rows[i].style.background='gray'
22                     }
23                 }
24             }
25         </script>
26     </head>
27     <body>
28         <table id="tab1" border="1" width="400" cellpadding="15" >
29             <caption>DOM高级操作试用表</caption>
30             <thead>
31                 <td>序号</td>
32                 <td>名字</td>
33                 <td>年龄</td>
34             </thead>
35             <tbody>
36             <tr>
37                 <td>1</td>
38                 <td>赵毅</td>
39                 <td>18</td>
40             </tr>
41             <tr>
42                 <td>2</td>
43                 <td>钱军</td>
44                 <td>20</td>
45             </tr>
46             <tr>
47                 <td>3</td>
48                 <td>孙火</td>
49                 <td>22</td>
50             </tr>
51             <tr>
52                 <td>4</td>
53                 <td>李四</td>
54                 <td>24</td>
55             </tr>
56             </tbody>
57         </table>
58     </body>
59 </html>

     

posted @ 2016-04-26 21:18  Blue-Beginner  阅读(227)  评论(0)  编辑  收藏  举报