你的位置:首页 > Java教程

[Java教程]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.background13           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>