ASCII码 ASCII码

固定导航栏｜可编辑表格

发布于：2021-12-10 08:50:48  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     body{
  9.         margin: 0;
  10.         padding: 0;
  11.         height: 1024px;
  12.     }
  13.     nav{
  14.         margin-top: 40px;
  15.         position: relative;
  16.         width: 100vw;
  17.         height: 40px;
  18.         background-color: #90D7EC;
  19.         text-align: center;
  20.         line-height: 40px;
  21.         z-index: 9;
  23.     }
  24.     table{
  25.         margin:100px auto;
  26.         width: 500px;
  27.         border-collapse: collapse;
  29.     }
  30.     tr,th,td{
  31.         border: 1px solid green;
  32.         margin: 0;
  33.         padding: 0;
  34.         text-align: center;
  35.     }
  36.     td>input{
  37.         height: 100%;
  38.         width: 80%;
  39.         border: none;
  40.         outline: none;
  41.     }
  42. </style>
  43. <body>
  45. <nav id="navObj">固定导航栏</nav>
  47. <table>
  48.     <tr>
  49.         <th>名称</th>
  50.         <th>内容</th>
  51.     </tr>
  52.     <tr>
  53.         <td>
  54.             php中文网
  55.         </td>
  56.         <td>
  57.             学习家园
  58.         </td>
  59.     </tr>
  60.     <tr>
  61.         <td>
  62.             php中文网
  63.         </td>
  64.         <td>
  65.             学习家园
  66.         </td>
  67.     </tr>
  68. </table>
  70. </body>
  71. <script>
  73.     var tdObj = document.getElementsByTagName('td');
  74.     for(let i=0;i<tdObj.length;i++){
  75.         tdObj[i].addEventListener('click',function(){
  76.             edit(this)
  77.         })
  78.     }
  79.      function edit(i) {
  80.          var inputlen = document.getElementsByTagName('input').length
  81.          var oldValue = i.innerHTML;
  83.          if (inputlen ==1){
  84.              var textBox = document.createElement("INPUT");
  85.              textBox.type = "text";
  86.              textBox.value = i.innerHTML;
  87.             var timer;
  88.              i.innerHTML = '';
  89.              i.appendChild(textBox)
  90.              textBox.select();
  91.              setTimeout(function () {
  92.                  timer =textBox.onblur =function () {
  93.                      i.innerHTML = textBox.value
  94.                  }
  95.              },2000)
  97.              textBox.onkeydown = function (e) {
  99.                  if (e.keyCode == 13){
  100.                      clearTimeout(timer);
  101.                      i.innerHTML= textBox.value;
  102.                  }
  103.                  if (e.keyCode ==27){
  104.                      clearTimeout(timer)
  105.                      i.innerHTML = oldValue;
  106.                  }
  107.              }
  108.          }
  109.      }
  111.     var navObj = document.getElementById('navObj');
  112.     window.onscroll = function () {
  113.         if ( document.documentElement.scrollTop>40){
  114.             navObj.style.top =  (document.documentElement.scrollTop-40)+ 'px';
  115.         }
  116.     }
  117. </script>
  118. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行