Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 固定导航栏和可编辑表格
Blogger Information
Blog 70
fans 1
comment 0
visits 53040
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
固定导航栏和可编辑表格
葡萄枝子
Original
657 people have browsed it

固定导航栏和可编辑表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body, ul, li {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         ul {
  13.             list-style: none;
  14.         }
  16.         a {
  17.             text-decoration: none;
  18.         }
  20.         a:hover {
  21.             text-decoration: underline;
  22.         }
  24.         .container {
  25.             width: 600px;
  26.             margin: 20px auto;
  27.             background-color: #fbfbfb;
  28.         }
  30.         nav > div {
  31.             height: 90px;
  32.             display: flex;
  33.             justify-content: space-between;
  34.             align-items: center;
  35.             border: 1px solid #ccc;
  36.             padding: 0 20px;
  37.         }
  39.         nav > ul {
  40.             height: 30px;
  41.             width: 580px;
  42.             background-color: #fbfbfb;
  43.             border-bottom: 1px solid #888888;
  44.             display: flex;
  45.             justify-content: space-between;
  46.             align-items: center;
  47.             padding: 5px 10px;
  48.         }
  50.         main {
  51.             height: 100vh;
  52.             border: 1px solid #ccc;
  53.         }
  55.         main > table {
  56.             border: 1px solid #ccc;
  57.             margin: 15px auto;
  58.             background-color: #fff;
  59.             width: 95%;
  60.         }
  62.         main > table thead th:first-of-type {
  63.             width: 10%;
  64.         }
  66.         main > table thead th:first-of-type ~ * {
  67.             width: 45%;
  68.         }
  70.         main > table tbody input {
  71.             width: 95%;
  72.             margin: 0 1px;
  73.         }
  75.         main > table tr {
  76.             border: 1px solid #ccc;
  77.             background-color: aliceblue;
  78.         }
  80.         footer {
  81.             height: 60px;
  82.             line-height: 60px;
  83.             border: 1px solid #ccc;
  84.             text-align: center;
  85.         }
  86.     </style>
  87. </head>
  88. <body>
  89. <header class="container">
  90.     <nav>
  91.         <div id="nav-top">
  92.             <div>Logo</div>
  93.             <div></div>
  94.             <div></div>
  95.         </div>
  96.         <ul id="nav-menu">
  97.             <li><a href="" title="">导航1</a></li>
  98.             <li><a href="" title="">导航2</a></li>
  99.             <li><a href="" title="">导航3</a></li>
  100.             <li><a href="" title="">导航4</a></li>
  101.             <li><a href="" title="">导航5</a></li>
  102.         </ul>
  103.     </nav>
  104. </header>
  105. <main class="container ">
  106.     <table>
  107.         <thead>
  108.         <tr>
  109.             <th>ID</th>
  110.             <th>name</th>
  111.             <th>value</th>
  112.         </tr>
  113.         </thead>
  114.         <tbody>
  115.         <tr>
  116.             <td>1</td>
  117.             <td>text name</td>
  118.             <td>text value</td>
  119.         </tr>
  120.         <tr>
  121.             <td>2</td>
  122.             <td>text name2</td>
  123.             <td>text value2</td>
  124.         </tr>
  125.         </tbody>
  126.     </table>
  127. </main>
  128. <footer class="container">
  129.     @copy 2021
  130. </footer>
  132. <script>
  133.     // 固定导航
  134.     var navTop = document.getElementById('nav-top'),
  135.         navMenu = document.getElementById('nav-menu');
  136.     window.onscroll = function () {
  137.         if (document.documentElement.scrollTop > navTop.offsetHeight + navTop.offsetTop) {
  138.             navMenu.style.cssText = 'position:fixed;top:0';
  139.         } else {
  140.             navMenu.style.cssText = 'position:static';
  141.         }
  142.     }
  144.     // 可编辑表格
  145.     // var tds = document.getElementsByTagName('table')[0].getElementsByTagName('td');
  146.     // [...tds].forEach(function (td){
  147.     //     // ID字段不可编辑
  148.     //     if (td !== [...td.parentNode.childNodes].filter(el => el.nodeType === 1).shift()) {
  149.     //         td.onclick = function () {
  150.     //             // 如果input框，直接获取焦点
  151.     //             if ([...this.childNodes].some(el => el.nodeName === 'INPUT')) {
  152.     //                 [...this.childNodes].filter(el => el.nodeName === 'INPUT').shift().focus();
  153.     //             } else {
  154.     //                 var eInput = document.createElement('input');
  155.     //                 eInput.type = 'text';
  156.     //                 eInput.value = this.textContent;
  157.     //                 this.innerHTML = '';
  158.     //                 this.appendChild(eInput);
  159.     //                 eInput.focus();
  160.     //                 // 失去焦点时
  161.     //                 eInput.onblur = function () {
  162.     //                     this.parentNode.innerHTML = this.value;
  163.     //                 }
  164.     //             }
  165.     //         }
  166.     //     }
  167.     // });
  169.     var tBody = document.getElementsByTagName('table')[0].getElementsByTagName('tbody')[0];
  170.     tBody.addEventListener('click', function (ev) {
  171.         var event = ev || window.event;
  172.         event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
  173.         // ID字段不可编辑
  174.         if ([...event.target.parentNode.childNodes].filter(el => el.nodeType === 1).shift() !== event.target) {
  175.             // 如果input框，直接获取焦点
  176.             if ([...event.target.childNodes].some(el => el.nodeName === 'INPUT')) {
  177.                 [...event.target.childNodes].filter(el => el.nodeName === 'INPUT').shift().focus();
  178.             } else {
  179.                 var eInput = document.createElement('input');
  180.                 eInput.type = 'text';
  181.                 eInput.value = event.target.textContent;
  182.                 event.target.innerHTML = '';
  183.                 event.target.appendChild(eInput);
  184.                 eInput.focus();
  185.                 // 失去焦点时
  186.                 eInput.onblur = function () {
  187.                     this.parentNode.innerHTML = this.value;
  188.                 }
  189.             }
  190.         }
  191.     });
  192. </script>
  193. </body>
  194. </html>
  • 页面滚动时，导航栏固定在顶部
    固定导航栏

股东顶部

  • 编辑第一张图中表格最后一个字段为 hello world! 失去焦点生效

可编辑表格

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：关于Enter和Esc功能可以再完善一下
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post