transform-dom.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>From Markup Grid Example</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <link rel="stylesheet" type="text/css" href="../shared/example.css" />
  8. <!-- GC -->
  9. <style type="text/css">
  10. #the-table {
  11. border:1px solid #bbb;
  12. border-collapse:collapse;
  13. }
  14. #the-table td,#the-table th {
  15. border:1px solid #ccc;
  16. border-collapse:collapse;
  17. padding:5px;
  18. }
  19. </style>
  20. <script type="text/javascript" src="../../ext-all.js"></script>
  21. <script type="text/javascript" src="transform-dom.js"></script>
  22. </head>
  23. <body>
  24. <h1>From Markup Grid Example</h1>
  25. <p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
  26. <p>Note that the js is not minified so it is readable. See <a href="transform-dom.js">transform-dom.js</a>.</p>
  27. <button id="create-grid" type="button">Create grid</button>
  28. <br />
  29. <br />
  30. <table cellspacing="0" id="the-table">
  31. <thead>
  32. <tr style="background:#eeeeee;">
  33. <th>Name</th>
  34. <th style="width: 40px;">Age</th>
  35. <th>Sex</th>
  36. </tr>
  37. </thead>
  38. <tbody>
  39. <tr>
  40. <td>Barney Rubble</td>
  41. <td>32</td>
  42. <td>Male</td>
  43. </tr>
  44. <tr>
  45. <td>Fred Flintstone</td>
  46. <td>33</td>
  47. <td>Male</td>
  48. </tr>
  49. <tr>
  50. <td>Betty Rubble</td>
  51. <td>32</td>
  52. <td>Female</td>
  53. </tr>
  54. <tr>
  55. <td>Pebbles</td>
  56. <td>1</td>
  57. <td>Female</td>
  58. </tr>
  59. <tr>
  60. <td>Bamm Bamm</td>
  61. <td>2</td>
  62. <td>Male</td>
  63. </tr>
  64. </tbody>
  65. </table>
  66. </body>
  67. </html>