13javaScript Dom点击特定单元格变色 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script type="text/javascript">
 6         onload = function () {
 7             //获得所有指定要操作的表格的所有行
 8             var trObjs= document.getElementById('tb').getElementsByTagName('tr');
 9             //使用this来指示触发事件的为当前对象。（event.srcElement响应的为所有事件）
10             for (var i = 0; i < trObjs.length; i++) {
11                 //给每个行注册一个单击的事件
12                 trObjs[i].onclick = function () {
13                     //将所有行的颜色重置
14                     for (var j = 0; j < trObjs.length; j++) {
15                         trObjs[j].style.backgroundColor = '';
16                     };
17                     this.style.backgroundColor = 'green';
18                 };
19             };
20         };
21     </script>
22 </head>
23 <body>
24     <table border="1" id="tb" style="cursor:pointer">
25 
26         <tr>
27             <td>
28                 唐老鸭
29             </td>
30             <td>
31                 米老鼠
32             </td>
33             <td>
34                 加菲猫
35             </td>
36         </tr>
37         <tr>
38             <td>
39                 唐老鸭
40             </td>
41             <td>
42                 米老鼠
43             </td>
44             <td>
45                 加菲猫
46             </td>
47         </tr>
48         <tr>
49             <td>
50                 唐老鸭
51             </td>
52             <td>
53                 米老鼠
54             </td>
55             <td>
56                 加菲猫
57             </td>
58         </tr>
59         <tr>
60             <td>
61                 唐老鸭
62             </td>
63             <td>
64                 米老鼠
65             </td>
66             <td>
67                 加菲猫
68             </td>
69         </tr>
70         <tr>
71             <td>
72                 唐老鸭
73             </td>
74             <td>
75                 米老鼠
76             </td>
77             <td>
78                 加菲猫
79             </td>
80         </tr>
81     </table>
82 </body>
83 </html>

 

posted on 2016-01-08 09:54  努力的活着_在人间  阅读(228)  评论(0)    收藏  举报

导航