欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

固定导航栏｜可编辑表格

程序员文章站 2022-03-07 19:40:13
...

固定导航栏｜可编辑表格

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6. </head>
    7. 

  7. <style>
    8. 

  8.     body{
    9. 

  9.         margin: 0;
    10. 

  10.         padding: 0;
    11. 

  11.         height: 1024px;
    12. 

  12.     }
    13. 

  13.     nav{
    14. 

  14.         margin-top: 40px;
    15. 

  15.         position: relative;
    16. 

  16.         width: 100vw;
    17. 

  17.         height: 40px;
    18. 

  18.         background-color: #90D7EC;
    19. 

  19.         text-align: center;
    20. 

  20.         line-height: 40px;
    21. 

  21.         z-index: 9;
    22. 

    23. 

  23.     }
    24. 

  24.     table{
    25. 

  25.         margin:100px auto;
    26. 

  26.         width: 500px;
    27. 

  27.         border-collapse: collapse;
    28. 

    29. 

  29.     }
    30. 

  30.     tr,th,td{
    31. 

  31.         border: 1px solid green;
    32. 

  32.         margin: 0;
    33. 

  33.         padding: 0;
    34. 

  34.         text-align: center;
    35. 

  35.     }
    36. 

  36.     td>input{
    37. 

  37.         height: 100%;
    38. 

  38.         width: 80%;
    39. 

  39.         border: none;
    40. 

  40.         outline: none;
    41. 

  41.     }
    42. 

  42. </style>
    43. 

  43. <body>
    44. 

    45. 

  45. <nav id="navObj">固定导航栏</nav>
    46. 

    47. 

  47. <table>
    48. 

  48.     <tr>
    49. 

  49.         <th>名称</th>
    50. 

  50.         <th>内容</th>
    51. 

  51.     </tr>
    52. 

  52.     <tr>
    53. 

  53.         <td>
    54. 

  54.             
    55. 

  55.         </td>
    56. 

  56.         <td>
    57. 

  57.             学习家园
    58. 

  58.         </td>
    59. 

  59.     </tr>
    60. 

  60.     <tr>
    61. 

  61.         <td>
    62. 

  62.             
    63. 

  63.         </td>
    64. 

  64.         <td>
    65. 

  65.             学习家园
    66. 

  66.         </td>
    67. 

  67.     </tr>
    68. 

  68. </table>
    69. 

    70. 

  70. </body>
    71. 

  71. <script>
    72. 

    73. 

  73.     var tdObj = document.getElementsByTagName('td');
    74. 

  74.     for(let i=0;i<tdObj.length;i++){
    75. 

  75.         tdObj[i].addEventListener('click',function(){
    76. 

  76.             edit(this)
    77. 

  77.         })
    78. 

  78.     }
    79. 

  79.      function edit(i) {
    80. 

  80.          var inputlen = document.getElementsByTagName('input').length
    81. 

  81.          var oldValue = i.innerHTML;
    82. 

    83. 

  83.          if (inputlen ==1){
    84. 

  84.              var textBox = document.createElement("INPUT");
    85. 

  85.              textBox.type = "text";
    86. 

  86.              textBox.value = i.innerHTML;
    87. 

  87.             var timer;
    88. 

  88.              i.innerHTML = '';
    89. 

  89.              i.appendChild(textBox)
    90. 

  90.              textBox.select();
    91. 

  91.              setTimeout(function () {
    92. 

  92.                  timer =textBox.onblur =function () {
    93. 

  93.                      i.innerHTML = textBox.value
    94. 

  94.                  }
    95. 

  95.              },2000)
    96. 

    97. 

  97.              textBox.onkeydown = function (e) {
    98. 

    99. 

  99.                  if (e.keyCode == 13){
    100. 

  100.                      clearTimeout(timer);
    101. 

  101.                      i.innerHTML= textBox.value;
    102. 

  102.                  }
    103. 

  103.                  if (e.keyCode ==27){
    104. 

  104.                      clearTimeout(timer)
    105. 

  105.                      i.innerHTML = oldValue;
    106. 

  106.                  }
    107. 

  107.              }
    108. 

  108.          }
    109. 

  109.      }
    110. 

    111. 

  111.     var navObj = document.getElementById('navObj');
    112. 

  112.     window.onscroll = function () {
    113. 

  113.         if ( document.documentElement.scrollTop>40){
    114. 

  114.             navObj.style.top =  (document.documentElement.scrollTop-40)+ 'px';
    115. 

  115.         }
    116. 

  116.     }
    117. 

  117. </script>
    118. 

  118. </html>
    119.

上一篇： 第三课-盒子模型-导航栏

下一篇： 通过Python将MP4视频转换为GIF动画

推荐阅读