一个树形表格的demo
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

77 lines
2.1 KiB

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <script src="./js/jquery-3.5.1.min.js"></script>
  9. <script src="./js/tree-table.js"></script>
  10. <script src="./js/index.js"></script>
  11. <link rel="stylesheet" href="./css/tree-table.css">
  12. <title>树形表格</title>
  13. <style>
  14. .right1{
  15. margin-right: 0px;
  16. transition: all 0.3s ease-out;
  17. transform: rotate(0deg);
  18. }
  19. .right2{
  20. transition: all 0.3s ease-out;
  21. margin-right: 0px;
  22. transform: rotate(90deg);
  23. }
  24. .nonSelect {
  25. -moz-user-select: none;
  26. -o-user-select: none;
  27. -khtml-user-select: none;
  28. -webkit-user-select: none;
  29. -ms-user-select: none;
  30. user-select: none;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="main" style="width: 800px;margin: 0 auto">
  36. <table id="testTb" class="treeTable" border="1">
  37. <tr>
  38. <td>
  39. <span class="right1 nonSelect" style="display: inline-block;width: 20px" onclick="test()">▶</span>
  40. <span style="display: inline-block;width: 80%;background-color: dodgerblue">1</span>
  41. </td>
  42. <td>小王</td>
  43. <td>小王</td>
  44. <td>小王</td>
  45. </tr>
  46. </table>
  47. </div>
  48. <script>
  49. function test() {
  50. $(".right1").toggleClass("right2");
  51. var tempStr =
  52. `
  53. <tr id="qwe">
  54. <td>
  55. <span style="display: inline-block;width: 20px"></span>
  56. <span style="display: inline-block;width: 80%;background-color: dodgerblue">2</span>
  57. </td>
  58. <td>小张</td>
  59. <td>小张</td>
  60. <td>小张</td>
  61. </tr>
  62. `;
  63. $("#testTb").append(tempStr);
  64. $("#qwe").animate({
  65. height: 40
  66. });
  67. }
  68. </script>
  69. </body>
  70. </html>