table.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  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 src="../../jquery.js"></script>
  14. <script type="text/javascript" charset="utf-8">
  15. jQuery(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>