黑马程序员技术交流社区

标题: 广州黑马前端学姐掘金1分钟搞定table表单 [打印本页]
作者: 黑马姿    时间: 2023-9-6 09:36
标题: 广州黑马前端学姐掘金1分钟搞定table表单
本帖最后由 班主任媚姐 于 2023-9-6 11:22 编辑

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

1分钟搞定table表单的双击编辑功能
实现思路（ 代码并不重要，关键是思路 ）
1.当你看到页面时，是普通的table表单，且正常情况不能编辑。当你双击的时候就进入编辑状态，这样在展示到页面上的时候给人一种普通table表单却能直接编辑的假象。 实际是在一个属性为text且隐藏起来的input标签上编辑，给table表单的单元格绑定了双击事件，触发时创建input标签并显示，并且同时将选中的table表单单元格上对应的值赋值给了input标签，当输入回车或者失去焦点时，通过赋值将相应的数据回填到单元格且隐藏input标签来完成修改。
参照流程图理解：
[attach]356261[/attach][attach]356261[/attach][attach]356261[/attach][attach]356261[/attach]
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




作者: 老旭谈IT    时间: 2023-9-6 11:16
这个技术真是令人惊叹！通过在一分钟内实现表单的双击编辑功能，它大大提高了开发效率和用户体验。这个功能让用户能够快速编辑表格中的数据，而不需要额外的点击和操作。它简单易用，而且无需过多的代码修改。对于开发者来说，这是一个非常有用且创造性的功能，使他们能够更快地完成任务并提供更好的用户界面。这个技术确实让人印象深刻！
作者: 我是一只小鸟儿    时间: 2023-9-6 11:16
好厉害的样子
作者: 龙海梅    时间: 2023-9-6 11:17
厉害厉害
作者: 班主任媚姐    时间: 2023-9-6 11:18
优秀的前端学长，好的学习习惯，期待学长后期多多分享
作者: yeslym    时间: 2023-9-6 11:22
太牛了
作者: cuichang1    时间: 2023-9-6 11:22
学长好优秀啊
作者: Julien27    时间: 2023-9-6 11:31
这个流程图惊艳了呀
作者: 就业找建哥    时间: 2023-9-6 11:34
这个问题也是面试高频问题，棒棒的
作者: 努力学习的每天    时间: 2023-9-6 11:34
小姐姐带带我
作者: 清风飞扬666    时间: 2023-9-6 14:16
6666又学会了一个新技术
作者: 一菲程序媛    时间: 2023-9-6 15:43
虽然看不懂，但逻辑真的很清晰，实属优秀
作者: 黑马姿    时间: 2023-9-7 11:32
太厉害的！
作者: yoyo钟    时间: 2023-9-7 11:39
内容太干货了 ，优秀
作者: 懂点IT的小兰姐    时间: 2023-9-7 14:24
确认了，不是我这个菜鸟能看懂的级别，大佬求带
作者: yqw    时间: 2023-9-7 14:25
膜拜
作者: 路人甲902    时间: 2023-9-7 14:33
干货满满呀，学习了
作者: czhm_li    时间: 2023-9-7 14:59
妥妥的精品，妥妥的受用~
作者: 小育0218    时间: 2023-9-7 21:51
好棒
作者: 清风飞扬666    时间: 2023-9-11 11:03
顶顶顶



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2