js实现点击修改按钮之后单元格变成可编辑状态

最新推荐文章于 2021-10-21 18:24:17 发布
最新推荐文章于 2021-10-21 18:24:17 发布
阅读量2.4k 收藏 8
点赞数 1
文章标签： javascript json 前端 ViewUI
原文链接：http://www.cnblogs.com/minesnil-forfaith/p/3595367.html
版权
该博客介绍了如何使用JavaScript实现在表格中点击修改按钮后，单元格变为可编辑状态。点击后，单元格内容被替换为input输入框，允许用户编辑。当输入框失去焦点时，应通过AJAX更新数据并恢复单元格原状。
摘要由CSDN通过智能技术生成

主要实现原理：

每一行有一个修改按钮 点击修改之后，获取行对象，通过行对象再获取行中单元格数组。然后把每一个单元格中的innerHTML替换成input输入框，并赋值value=原来单元格中的内容，鼠标移开之后还原。

效果图：点击之前

           点击之后

　　　　修改之后移开失去焦点：

这里应该还要当鼠标移开之后也就是失去焦点事件就触动函数，用ajax把数据提交到数据中去，并且输入框变回到原来的形式

 完整代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title>asd</title>
 6     <meta charset=utf-
最低0.47元/天 解锁文章
dengkan5056
关注
Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）
王佳斌
07-04 1765
vue3，nuxt3，点击变成输入框，点击编辑按钮让文本变为input方便修改，点击元素变输入框，可编辑input输入框，点击文字内容后变成＜input＞输入框同时能修改和取消、删除，输入框input点击右侧编辑图标后变为可编辑状态，当失去焦点后自动保存，vue文字点击变为输入框能修改，内容变成input可以修改，vue3点击按钮后旁边的文字变为可编辑，组件插件，教程，使文本变成可编辑的效果，点击取消复原，失去焦点还原，取消后恢复成原来的样子，如何实现点笔icon图标将html变成文本输入域能修改和移除，点
按钮控制输入框编辑状态（原生JS）
lseap的博客
08-10 528
源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
JS实现可编辑的表格单元格
07-26
JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格
js 实现 双击单元格变为可编辑
03-31
js 实现 双击单元格变为可编辑! 值得下载看看!资源免费,大家分享!!
点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）
热门推荐
qq_36856975的博客
03-02 2万+
1.先上最后效果图： 2.代码跟上，重点在 2）： 1） //服务列表页面动态加载服务 function ready() { var url = base_path+"console/cfg/getBaseLayers/"+configId; $.ajax({ url:url, type:"get", dataT
点击编辑按钮，前端table可以编辑特定单元格
我不会java的博客
10-19 1114
点击编辑按钮，前端table表格行内指定td内容可修改 效果图 点击编辑后效果图 代码
前端：JS实现双击table单元格变为可编辑状态
weixin_44324339的博客
08-02 794
前端：JS实现双击table单元格变为可编辑状态 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实现双击table单元格变为可编辑状态</t
优雅的elementUI table单元格可编辑实现方法详解
10-17
在本文中，我们将详细探讨如何优雅地实现 ElementUI Table 的单元格可编辑功能。这个功能允许用户在表格的特定单元格内进行编辑，提高交互性和用户体验。 首先，我们看到在 `APP.vue` 文件中，使用了 `<el-switch>`...
JS实现双击内容变为可编辑状态
12-08
一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。 我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再...
element-ui 表格实现单元格可编辑的示例
08-27
Element UI 表格实现单元格可编辑的示例 Element UI 是一个基于 Vue.js 的桌面端组件库，它提供了丰富的组件和功能，帮助开发者快速构建桌面端应用程序。在实际开发中，经常需要实现表格的可编辑功能，以便用户可以...
点击编辑table变为可编辑状态
weixin_33831196的博客
11-23 1831
简单描述：开发中遇到一个小困难，table展示的数据，需要是可编辑的，点击编辑按钮，页面table可以进行编辑，编辑完成后，点击保存数据就保留下来~~~ 思路：用一个带有input的表去替换不带input的表，用show和hide来实现 代码： //html代码<div class="btn-group"> <button class="btn sbold gre...
js实现按钮修改表单单元格的内容
qq_35201250的博客
10-21 3152
js实现按钮修改文件的内容 这是js的一次作业，在网上搜了好久，搜到的要不是看不懂得，要不就是不符合题目要求的！ 我自己乱搞搞出来了一个方法，现po到这里，供大家参考（我是后端方向的，前端是真不会搞，大家将就看） 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网上订单</title> <style type="text/css"> bo
表格点击变成input框可编辑
一树菩提一烟霞的博客
07-14 1万+
/*demo styles*/ table{margin:0 auto;border-collapse:collapse; } td, th{ width:10%; font-size:14px; padding:10px 0; text-align:center;border:1px solid #ddd; } th {background-color:#f4f4f4;}  /* inp
点击文字变成可编辑的文本
NINE-NINE的博客
04-16 1万+
当我们点击文字变成可编辑的文本
使用Jquery实现点击文字后变成文本框且可修改
hymdeyx的博客
03-07 6023
使用Jquery实现点击文字变为文本框效果，可对文本框文字进行修改。  1.点击文字变为文本框  2.文本框自动全选文字  3.对文本框内容进行修改  4.点击文本框以外的地方文本框再次变为修改后的文字  5.同步更新SQL数据库内容  Html部分代码  代码如下:     ID  名称  操作      1  哈哈  删除   
JS实现双击编辑可修改
weixin_33725807的博客
03-05 2355
需求描述：在一段文字处双击可以进行修改，也就是双击后创建输入框，输入内容，在输入框失去焦点后将输入的内容再以文字的形式显示出来，以下是html代码： 1 &lt;fieldset&gt; 2 &lt;legend&gt;双击用户名进行编辑&lt;/legend&gt; 3 &lt;dl&gt; 4 &lt;dt&gt;你的用户名:&lt;...
修改上面代码，点击编辑按钮，表格单元变成可编辑的输入框进行修改
最新发布
03-28
以下是修改后的代码： HTML部分： ``` <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td contenteditable="true">John</td> <td contenteditable="true">28</td> <td contenteditable="true">New York</td> <td><button onclick="editRow(this)">Edit</button></td> </tr> <tr> <td contenteditable="true">Mary</td> <td contenteditable="true">25</td> <td contenteditable="true">Los Angeles</td> <td><button onclick="editRow(this)">Edit</button></td> </tr> <tr> <td contenteditable="true">Bob</td> <td contenteditable="true">30</td> <td contenteditable="true">Chicago</td> <td><button onclick="editRow(this)">Edit</button></td> </tr> </tbody> </table> ``` JavaScript部分： ``` function editRow(button) { var row = button.parentNode.parentNode; var cells = row.getElementsByTagName("td"); for (var i = 0; i < cells.length - 1; i++) { var cell = cells[i]; var text = cell.innerHTML; cell.innerHTML = '<input type="text" value="' + text + '">'; } button.innerHTML = "Save"; button.onclick = function() { saveRow(this); }; } function saveRow(button) { var row = button.parentNode.parentNode; var cells = row.getElementsByTagName("td"); for (var i = 0; i < cells.length - 1; i++) { var cell = cells[i]; var input = cell.getElementsByTagName("input")[0]; var text = input.value; cell.innerHTML = text; } button.innerHTML = "Edit"; button.onclick = function() { editRow(this); }; } ``` 在修改后的代码中，我们给每个单元格添加了 `contenteditable="true"` 属性，这使得单元格内容可编辑。在 `editRow` 函数中，我们把单元格内容替换成了包含文本框的 HTML 代码，这样就可以编辑单元格了。在 `saveRow` 函数中，我们获取了每个单元格中的文本框的值，然后把单元格内容替换成了这个值，这样就完成了单元格的修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值