1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>利用鼠标事件完成表格的高亮显示</title> 6 <script> 7 function changeColor(id,val) 8 { 9 if(val=="over") 10 { 11 document.getElementById(id).style.backgroundColor="cornflowerblue"; 12 }else if(val=="out") 13 { 14 document.getElementById(id).style.backgroundColor="white"; 15 } 16 17 } 18 </script> 19 <style type="text/css"> 20 td 21 { 22 width:150px; 23 font-size:15px; 24 text-align:center; 25 } 26 input 27 { 28 text-align:center; 29 } 30 </style> 31 </head> 32 <body> 33 <div align="center"> 34 <form action="" method="post" > 35 <table border="1px" width="500px"height="50px" align="center"> 36 <thead> 37 <tr> 38 <th><input type="checkbox" id="checkAll"/></th> 39 <th>商品名称</th> 40 <th>商品价格</th> 41 <th>购买数量</th> 42 <th>商品总价</th> 43 </tr> 44 </thead> 45 46 <tbody> 47 <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')"> 48 <td><input type="checkbox"/></td> 49 <td>华为P20</td> 50 <td>4500</td> 51 <td></td> 52 <td></td> 53 </tr> 54 <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')"> 55 <td><input type="checkbox"/></td> 56 <td>iphoneX</td> 57 <td>8000</td> 58 <td></td> 59 <td></td> 60 </tr> 61 <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')"> 62 <td><input type="checkbox"/></td> 63 <td>小米6</td> 64 <td>2399</td> 65 <td></td> 66 <td></td> 67 </tr> 68 <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')"> 69 <td><input type="checkbox"/></td> 70 <td>OPPOR11</td> 71 <td>1899</td> 72 <td></td> 73 <td></td> 74 </tr> 75 </tbody> 76 </table> 77 </form> 78 </div> 79 </body> 80 </html>>