JS获取table

最新推荐文章于 2021-06-17 03:47:58 发布

天为我蓝

最新推荐文章于 2021-06-17 03:47:58 发布

阅读量275

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/52css/archive/2013/03/07/2948164.html

版权

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>