table.html (1255B)
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>