|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
6 <title>table</title> |
|
7 <style type="text/css" media="screen"> |
|
8 body { margin: 1px; padding: 5px; } |
|
9 table { border: 2px solid #000; } |
|
10 th, td { border: 1px solid #000; width: 100px; height: 100px; } |
|
11 #marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; } |
|
12 </style> |
|
13 <script type="text/javascript" src="../../../dist/jquery.js"></script> |
|
14 <script type="text/javascript" charset="utf-8"> |
|
15 $(function() { |
|
16 $('table, th, td').click(function() { |
|
17 $('#marker').css( $(this).offset() ); |
|
18 return false; |
|
19 }); |
|
20 }); |
|
21 </script> |
|
22 </head> |
|
23 <body> |
|
24 <table id="table-1"> |
|
25 <thead> |
|
26 <tr valign="top"> |
|
27 <th id="th-1">th-1</th> |
|
28 <th id="th-2">th-2</th> |
|
29 <th id="th-3">th-3</th> |
|
30 </tr> |
|
31 </thead> |
|
32 <tbody> |
|
33 <tr valign="top"> |
|
34 <td id="td-1">td-1</td> |
|
35 <td id="td-2">td-2</td> |
|
36 <td id="td-3">td-3</td> |
|
37 </tr> |
|
38 </tbody> |
|
39 </table> |
|
40 <div id="marker"></div> |
|
41 <p class="instructions">Click the white box to move the marker to it.</p> |
|
42 </body> |
|
43 </html> |