JS获取table
JS获取表格的简便方法：获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells
使用实例： oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]
隔行变色代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>隔行变色</title> 6 <script> 7 window.onload=function() 8 { 9 var oTable=document.getElementById('table'); 10 11 for(var i=0;i<oTable.tBodies[0].rows.length;i++) 12 { 13 oTable.tBodies[0].rows[i].onmouseover=function() 14 { 15 oldcolor=this.style.background; //把当前行的颜色赋给变量 16 this.style.background='blue'; 17 }; 18 19 oTable.tBodies[0].rows[i].onmouseout=function() 20 { 21 this.style.background=oldcolor; 22 }; 23 24 if(i%2){ 25 oTable.tBodies[0].rows[i].style.background='#ccc'; 26 } 27 else{ 28 oTable.tBodies[0].rows[i].style.background=''; 29 } 30 }; 31 }; 32 </script> 33 </head> 34 35 <body> 36 <table border="1" cellspacing="0" cellpadding="0" width="100%" id="table"> 37 <thead> 38 <tr> 39 <td>姓名</td> 40 <td>学号</td> 41 <td>专业</td> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td>A</td> 47 <td>1</td> 48 <td>A</td> 49 </tr> 50 <tr> 51 <td>A</td> 52 <td>1</td> 53 <td>A</td> 54 </tr> 55 <tr> 56 <td>A</td> 57 <td>1</td> 58 <td>A</td> 59 </tr> 60 <tr> 61 <td>A</td> 62 <td>1</td> 63 <td>A</td> 64 </tr> 65 <tr> 66 <td>A</td> 67 <td>1</td> 68 <td>A</td> 69 </tr> 70 <tr> 71 <td>A</td> 72 <td>1</td> 73 <td>A</td> 74 </tr> 75 </tbody> 76 </table> 77 </body> 78 </html>
