1分钟搞定table表单的双击编辑功能

1分钟搞定table表单的双击编辑功能

实现思路（ 代码并不重要，关键是思路 ）

1.当你看到页面时，是普通的table表单，且正常情况不能编辑。当你双击的时候就进入编辑状态，这样在展示到页面上的时候给人一种普通table表单却能直接编辑的假象。 实际是在一个属性为text且隐藏起来的input标签上编辑，给table表单的单元格绑定了双击事件，触发时创建input标签并显示，并且同时将选中的table表单单元格上对应的值赋值给了input标签，当输入回车或者失去焦点时，通过赋值将相应的数据回填到单元格且隐藏input标签来完成修改。

参照流程图理解：

css代码

css

* {      

text-align: center;        

font-size: 18px;   

          }   

         table {      

border: 1px solid #eee;     

         }   

          th {        

background-image: linear-gradient(skyblue, #fff);     

         }   

          td {        

position: relative;        

background-image: linear-gradient(pink, #fff);   

          }     

         input {        

position: absolute;        

        top: 0;        

        left: 0;        

        display: none;        

        width: 100%;      

height: 100%;      

background-image: linear-gradient(pink, #fff);      

          border: none;        

  outline: medium;   

          }

html代码

html

<table>      

<colgroup>      

<col width="14%" />      

<col width="16%" />      

<col width="15%" />        

<col width="15%" />        

<col width="15%" />        

<col width="15%" />        

<col width="15%" />     

</colgroup>     

<thead>      

<tr>         

<th scope="col">学员ID</th>         

<th scope="col">姓名</th>         

<th scope="col">第1次成绩</th>         

<th scope="col">第2次成绩</th>         

<th scope="col">第3次成绩</th>         

<th scope="col">第4次成绩</th>         

<th scope="col">第5次成绩</th>   

</tr>     

</thead>      

<tbody>      

<tr>         

<th scope="row">10</th>         

<td>张三</td>         

<td class="score">70</td>        

  <td class="score">70</td>         

<td class="score">70</td>         

<td class="score"></td>         

<td class="score"></td>      

</tr>      

<tr>         

<th scope="row">11</th>         

<td>李四</td>         

<td class="score">70</td>         

<td class="score">70</td>         

<td class="score"></td>         

<td class="score"></td>         

<td class="score"></td>      

</tr>      

</tbody>   

</table>

js代码

// 给成绩单元格绑定双击事件   

   document      

.querySelector("tbody")        

.addEventListener("dblclick", function (e) {         

if (e.target.classList.contains("score")) {     

       const input = document.createElement("input");           

input.type = "text";         

  e.target.append(input);            

// 标签显示出来           

input.style.display = "block";           

input.value = e.target.innerText; // 显示旧成绩            

// 让input标签自动获得焦点            

input.focus();           

// 给input绑定抬起键盘 判断按下是不是回车键，如果是回车就回填         

  input.addEventListener("keyup", function (ev) {  

            if (ev.key === "Enter") {              

  e.target.innerText = input.value;               

input.style.display = "none";            

}           

});         

  //设置失焦回填内容           

input.addEventListener("blur", function (ev) {            

e.target.innerText = input.value;            

input.style.display = "none";          

  });   

       }     

   });

标签：

JavaScript

这个技术真是令人惊叹！通过在一分钟内实现表单的双击编辑功能，它大大提高了开发效率和用户体验。这个功能让用户能够快速编辑表格中的数据，而不需要额外的点击和操作。它简单易用，而且无需过多的代码修改。对于开发者来说，这是一个非常有用且创造性的功能，使他们能够更快地完成任务并提供更好的用户界面。这个技术确实让人印象深刻！

好厉害的样子

厉害厉害

优秀的前端学长，好的学习习惯，期待学长后期多多分享

太牛了

学长好优秀啊

这个流程图惊艳了呀

这个问题也是面试高频问题，棒棒的

小姐姐带带我

6666又学会了一个新技术

虽然看不懂，但逻辑真的很清晰，实属优秀

太厉害的！

内容太干货了 ，优秀

确认了，不是我这个菜鸟能看懂的级别，大佬求带

膜拜

干货满满呀，学习了

妥妥的精品，妥妥的受用~

好棒

顶顶顶