A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 黑马姿 黑马粉丝团   /  2023-9-6 09:36  /  2592 人查看  /  20 人回复  /   5 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 班主任媚姐 于 2023-9-6 11:22 编辑

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

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




点评

非常不错!  发表于 2023-9-11 11:07

评分

参与人数 3技术分 +3 黑马币 +3 收起 理由
一菲程序媛 + 1 + 1 赞一个!
班主任媚姐 + 1 + 1 赞一个!
努力学习的每天 + 1 + 1 很给力!

查看全部评分

20 个回复

倒序浏览
这个技术真是令人惊叹!通过在一分钟内实现表单的双击编辑功能,它大大提高了开发效率和用户体验。这个功能让用户能够快速编辑表格中的数据,而不需要额外的点击和操作。它简单易用,而且无需过多的代码修改。对于开发者来说,这是一个非常有用且创造性的功能,使他们能够更快地完成任务并提供更好的用户界面。这个技术确实让人印象深刻!
回复 使用道具 举报
好厉害的样子
回复 使用道具 举报
厉害厉害
回复 使用道具 举报
优秀的前端学长,好的学习习惯,期待学长后期多多分享
回复 使用道具 举报
太牛了
回复 使用道具 举报
学长好优秀啊
回复 使用道具 举报
这个流程图惊艳了呀
回复 使用道具 举报
这个问题也是面试高频问题,棒棒的
回复 使用道具 举报
小姐姐带带我
回复 使用道具 举报
6666又学会了一个新技术
回复 使用道具 举报
虽然看不懂,但逻辑真的很清晰,实属优秀
回复 使用道具 举报
太厉害的!
回复 使用道具 举报
内容太干货了 ,优秀
回复 使用道具 举报
确认了,不是我这个菜鸟能看懂的级别,大佬求带
回复 使用道具 举报
膜拜
回复 使用道具 举报
路人甲902 来自手机 黑马粉丝团 2023-9-7 14:33:06
17#
干货满满呀,学习了
回复 使用道具 举报
妥妥的精品,妥妥的受用~
回复 使用道具 举报
好棒
回复 使用道具 举报
顶顶顶
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马