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>

 

你可能感兴趣的:(table)