1.通过jQuery的形式实现
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 边框表格</title> 5 <style type="text/css"> 6 .hover{background:#F00;} 7 </style> 8 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 9 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 10 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 11 <script type="text/javascript"> 12 $(function(){ 13 $("td").hover( 14 function(){ 15 $(this).addClass("hover"); 16 }, 17 18 function(){ 19 $(this).removeClass("hover"); 20 } 21 ); 22 }); 23 </script> 24 </head> 25 <body> 26 27 <table class="table table-bordered"> 28 <caption>边框表格布局</caption> 29 <thead> 30 <tr> 31 <th>名称</th> 32 <th>城市</th> 33 <th>密码</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr> 38 <td>Tanmay</td> 39 <td>Bangalore</td> 40 <td>560001</td> 41 </tr> 42 <tr> 43 <td>Sachin</td> 44 <td>Mumbai</td> 45 <td>400003</td> 46 </tr> 47 <tr> 48 <td>Uma</td> 49 <td>Pune</td> 50 <td>411027</td> 51 </tr> 52 </tbody> 53 </table> 54 55 </body> 56 </html>
2.通过javascript原生实现
代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 window.onload=function () 8 { 9 var oTab=document.getElementById('tab1'); 10 var oldColor='';//用于保存原来一行的颜色 11 12 for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行 13 { 14 oTab.tBodies[0].rows[i].onmouseover=function () 15 { 16 oldColor=this.style.background; 17 this.style.background="green"; 18 }; 19 oTab.tBodies[0].rows[i].onmouseout=function () 20 { 21 22 this.style.background=oldColor;//鼠标移出的时候将本行的颜色设置为原来的颜色，而原来的颜色保存在oldColor中 23 24 }; 25 26 27 if(i%2) 28 { 29 oTab.tBodies[0].rows[i].style.background="#CCC"; 30 31 }else{ 32 oTab.tBodies[0].rows[i].style.background=""; 33 34 } 35 } 36 37 }; 38 39 </script> 40 </head> 41 42 <body> 43 <table id="tab1" border="1" width="500"> 44 <thead> 45 <td>ID</td> 46 <td>姓名</td> 47 <td>年龄</td> 48 </thead> 49 50 <tbody> 51 <tr> <td>1</td> 52 <td>Xuan</td> 53 <td>23</td> 54 </tr> 55 56 <tr> <td>2</td> 57 <td>XXX</td> 58 <td>25</td> 59 </tr> 60 61 <tr> <td>3</td> 62 <td>SSS</td> 63 <td>24</td> 64 </tr> 65 66 <tr> <td>4</td> 67 <td>李四</td> 68 <td>26</td> 69 </tr> 70 71 <tr> <td>5</td> 72 <td>王五</td> 73 <td>29</td> 74 </tr> 75 </tbody> 76 </table> 77 </body> 78 </html>