点击按钮让<td>内容可以编辑保存发到后台？-CSDN论坛

点击按钮让<td>内容可以编辑保存发到后台？

Web 开发 > JavaScript

收藏回复

[问题点数：50分，结帖人peitun5884]

⋅web添加input按钮问题 ⋅css问题，文字和勾选框需要平行 ⋅点击按钮让<td>内容可以编辑保存发到后台？ 更多帖子 关注私信空间博客 peitun5884 等级 本版专家分：0 结帖率 100%: 需求效果图

jsp代码

领导让我写，对于前端真是头大啊，只会一些简单的js啊。
写了一天了还写不出来。
需求：点击地址列的某个按钮图标，让地址可以编辑，鼠标离开或回车可以提示保存内容。
小弟最后50分，来一位大佬帮帮忙。

2017-10-31 16:05:33

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅求一个linq Row_number的写法 ⋅asp.net自定义400错误显示 ⋅已经使用Tls12还是报错The request was aborted: Could not create SSL/TLS secure channel 更多帖子 关注私信空间博客 版主 支付宝加好友偷能量挖，胡杨... 等级 本版专家分：396100 勋章 探花 2017年总版技术专家分年内排行榜第三 进士 2018年总版新获得的技术专家分排名前十 2013年总版技术专家分年内排行榜第五 金牌 2018年5月总版技术专家分月排行榜第一 2018年4月总版技术专家分月排行榜第一 2018年2月总版技术专家分月排行榜第一 2017年8月总版技术专家分月排行榜第一 银牌 2018年3月总版技术专家分月排行榜第二 2017年11月总版技术专家分月排行榜第二 2016年2月总版技术专家分月排行榜第二 2014年2月总版技术专家分月排行榜第二 2013年4月总版技术专家分月排行榜第二

onclick="editAddr('${k.code"],this)"

function editAddr(code,btn){

var span=btn.previousSibling;

span.innerHTML='<input type="text" value="'+span.innerHTML.replace(/"/g,'&quot;')+'" onblur="save(this,\''+code+'\')"/>'

span.firstChild.focus()

}

function save(el,code){

//...保存的代码，用ajax发送到code，el.value到服务器保存

el.parentNode.innerHTML=el.value.replace(/</g,'&lt;').replace(/>/g,'&gt;')

}

Web开发学习资料推荐
通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名
jQuery仿excel表格单元格合并插件

2017-10-31 16:25:50

点赞 1 只看TA 引用举报 #1得分 90

⋅博客的富文本编辑器把html标签中 onclick 等事件的第一个字符 o 给自动改成了ο（编码是03BF），正常的 o 编码是006F

⋅用网站论坛的移动版发的图片都只有缩略图没有原图

⋅为什么我在问答区的回答总是莫名的消失？

更多帖子

关注私信空间博客

天际的海浪

等级

本版专家分：159119

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

GitHub 绑定GitHub第三方账户获取

进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年总版技术专家分年内排行榜第七

银牌 2019年1月总版技术专家分月排行榜第二: 点击按钮后把<span></span>替换成<input type="text" />，可以用jquery的replaceWith()或replaceAll()替换。
input失去焦点blur(function(event){});或回车keydown(function(event){if (event.which==13) {}})就用ajax保存内容到服务器。并把<span></span>替换回来。

2017-10-31 16:41:07

点赞只看TA 引用举报 #2得分 5

⋅此用户还没有发表过任何帖子

关注私信空间博客

jio可

等级

本版专家分：14641

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

红花 2019年9月 Web 开发大版内专家分月排行榜第一

黄花 2020年7月 Web 开发大版内专家分月排行榜第二
2020年6月 Web 开发大版内专家分月排行榜第二
2020年4月 Web 开发大版内专家分月排行榜第二
2020年3月 Web 开发大版内专家分月排行榜第二
2019年10月 Web 开发大版内专家分月排行榜第二



<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<table>

	<tr>

		<td>dddd</td>

		<td><span>原地址</span><input type='button' class='btn_editAddr' code='2222'></td>

		<td></td>

	</tr>

</table>

<script type="text/javascript">

var oldAddr = '';//保存原来的地址

$('td').on('click', '.btn_editAddr', function(){

   var code = $(this).attr('code'),span = $(this).prev('span');

   oldAddr = span.text();

   span.html('<input type="text" class="ed" value="'+oldAddr+'"/>');

});

//回车

$('td').on('keyup', '.ed',function(e){

   if(e.keyCode === 13){

       //发送数据到后台

       $(this).parent().html($(this).val());

    }

});

//鼠标离开

$('td').on('blur', '.ed',function(e){

       //发送数据到后台

       $(this).parent().html($(this).val());

});

</script>

2017-10-31 16:41:53

点赞只看TA 引用举报 #3得分 0

⋅此用户还没有发表过任何帖子

关注私信空间博客

jio可

等级

本版专家分：14641

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

红花 2019年9月 Web 开发大版内专家分月排行榜第一

黄花 2020年7月 Web 开发大版内专家分月排行榜第二
2020年6月 Web 开发大版内专家分月排行榜第二
2020年4月 Web 开发大版内专家分月排行榜第二
2020年3月 Web 开发大版内专家分月排行榜第二
2019年10月 Web 开发大版内专家分月排行榜第二: 保存的oldAddr在后台修改失败的时候回滚页面已经修改的值

2017-10-31 16:44:07

点赞只看TA 引用举报 #4得分 0

⋅web添加input按钮问题 ⋅css问题，文字和勾选框需要平行 ⋅点击按钮让<td>内容可以编辑保存发到后台？ 更多帖子 关注私信空间博客 peitun5884 等级 本版专家分：0: 谢谢大家。我都试试效果，等下给分，非常感谢。

2017-10-31 16:46:27

点赞只看TA 引用举报 #5得分 0

⋅web添加input按钮问题 ⋅css问题，文字和勾选框需要平行 ⋅点击按钮让<td>内容可以编辑保存发到后台？ 更多帖子 关注私信空间博客 peitun5884 等级 本版专家分：0

引用 1 楼 showbo 的回复:

onclick="editAddr('${k.code"],this)"

function editAddr(code,btn){

var span=btn.previousSibling;

span.innerHTML='<input type="text" value="'+span.innerHTML.replace(/"/g,'&quot;')+'" onblur="save(this,\''+code+'\')"/>'

span.firstChild.focus()

}

function save(el,code){

//...保存的代码，用ajax发送到code，el.value到服务器保存

el.parentNode.innerHTML=el.value.replace(/</g,'&lt;').replace(/>/g,'&gt;')

}

首先非常感谢解答。
有疑问：el取出来的是[object HTMLInputElement]
code数据没有问题

2017-10-31 16:53:28

点赞只看TA 引用举报 #6得分 0

引用 6 楼 peitun5884 的回复:

Quote: 引用 1 楼 showbo 的回复:
onclick="editAddr('${k.code"],this)"
function editAddr(code,btn){

var span=btn.previousSibling;

span.innerHTML='<input type="text" value="'+span.innerHTML.replace(/"/g,'&quot;')+'" onblur="save(this,\''+code+'\')"/>'

span.firstChild.focus()

}

function save(el,code){

//...保存的代码，用ajax发送到code，el.value到服务器保存

el.parentNode.innerHTML=el.value.replace(/</g,'&lt;').replace(/>/g,'&gt;')

}
Web开发学习资料推荐
通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名
jQuery仿excel表格单元格合并插件
首先非常感谢解答。
有疑问：el取出来的是[object HTMLInputElement]
code数据没有问题

认真看说明。el.value才是值，el是input对象

2017-10-31 17:02:41

点赞只看TA 引用举报 #7得分 0

⋅web添加input按钮问题 ⋅css问题，文字和勾选框需要平行 ⋅点击按钮让<td>内容可以编辑保存发到后台？ 更多帖子 关注私信空间博客 peitun5884 等级 本版专家分：0: 已经搞定，1楼的方法没有问题，已经实现了，好开心。谢谢

2017-10-31 17:09:51

点赞只看TA 引用举报 #8得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 zhang15080478307 等级 本版专家分：225

引用 1 楼 showbo 的回复:

onclick="editAddr('${k.code"],this)"

function editAddr(code,btn){

var span=btn.previousSibling;

span.innerHTML='<input type="text" value="'+span.innerHTML.replace(/"/g,'&quot;')+'" onblur="save(this,\''+code+'\')"/>'

span.firstChild.focus()

}

function save(el,code){

//...保存的代码，用ajax发送到code，el.value到服务器保存

el.parentNode.innerHTML=el.value.replace(/</g,'&lt;').replace(/>/g,'&gt;')

}

再次请教版主，这个方法出来的输入框的光标在文字最前面，如何弄到最后呢？

2017-11-13 14:19:20

点赞只看TA 引用举报 #9得分 0

收起

收藏回复

peitun5884

等级：

关注私信 TA的帖子

用jquery实现点击文字可编辑并保存修改至数据库: 这个方法网上可以查到很多，但是好多只有点击文字编辑

layui点击按钮添加可编辑行: 在网上看的大部分讲的都不是特别的通顺，而且就那么几篇文章都是一摸一样的内容，跟着我走让你做出来。废话不多，直接上代码点击添加，新增一条空白信息。我们首先要找到列表的源码才行，要不然即使新增了有...

点击编辑table变为可编辑状态: 简单描述：开发中遇到一个小困难，table展示的数据，需要是可编辑的，点击编辑按钮，页面table可以进行编辑，编辑完成后，点击保存数据就保留下来~~~ 思路：用一个带有input的表去替换不带input的表，用show和hide...

BJUI实现点击按钮弹窗，提交到后台action后回显数据流程整理: 当我们点击页面的某个按钮去执行某个业务时，需要弹出一个dialog窗口，然后再点击提交或者保存，提及给后台action，后台回显结果。效果点击某个按钮弹出窗口dialog 点击提交按钮回显消息实现点击...

点击编辑按钮，前端页面table中的一行更改的解决方案: 然后通过编辑按钮可以编辑那一行的数据，并且可以保存，没做过不知道，太烦了遇到的问题首先，我是使用的javascript，innerHTML代码，将那一行表格中间的代码用来代替，这样就可以修改数据了，但是还要将编辑按钮...

修改一个表格中的内容，把表格中多条数据提交给后台: 通常情况下，我们做的数据修改功能，都是在表格每一行数据的后边添加“编辑”按钮，把这一条数据传递到后台，类似于下图这样的修改方式，只是针对于一条数据。但是要提交整个表格就不适用了。类似于这样 ...

可编辑的表格：jQuery+PHP实现实时编辑表格字段内容: 在本例中，我们会通过jQuery实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”按钮，新的内容将发送到后台PHP程序处理，并保存到数据库；当点击“取消”按钮，则页面恢复到初始...

jquery:将table表变为可编辑状态，记录修改，新增或者删除的行。传入后台controller中: 博主初次入行，遇到一个好玩的客户需求，自己用jquery调试了好久总算调出来了，这里给大家分享一下我的经验，新手！新手！...所以客户更希望直接在table表中修改数据，然后再一次性将数据发送到后台处

js实现表格点击编辑: 一般后台的增删查改会将数据加载到表格中，而修改则可以直接点击表格实现，这里表格的代码我直接用Java代码了 <table class="tableBody" align="center" bordercolor="#66CCFF" style="width: 1000px;border:1;...

ckeditor 上传图片粘贴上传图片自定义富文本工具栏自定义保存按钮方法保存富文本内容功能等: 近期实现了项目整合ckeditor，包括上传图片，粘贴上传图片，内容保存及展示等功能；遇到了蛮多坑，简单总结一下。效果展示： 1.下载ckeditor https://ckeditor.com/ckeditor-4/download/ 注意：这里有好几个版本...

js实现：点击一个按钮，弹出一个div,并向其中传值，修改后，再传出: class="panel-body"> id="tbList" class="table footable" data-sort="false" > class="primary"> class="tar">序号类型商品显示名称商品编码

table表格中每行都有一个修改按钮怎么实现修改功能: 一般像这种形式的页面都是在js中动态拼接：关键在于按钮采用append追加到<td>里的button的,onclick事件不能在<input>标签里写，应该用如下方法定义：$(document).on('click...

jqGrid 单元格如何手动结束编辑、重置单元格编辑状态 getChangedCells获取不到数据一次性提交处理: 在上篇博文：&quot;jqGrid 单元格编辑自定义下拉...，讨论了如何用custom edittype实现一个通用的下拉选择框编辑方案，本文讨论的是jqGrid单元格编辑的另外两个问题：如何手动结束编辑和如何重置编辑状态。

jQuery+PHP实现实时编辑表格字段内容: 在本例中，我们会通过jQuery实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”按钮，新的内容将发送到后台PHP程序处理，并保存到数据库；当点击“取消”按钮，则页面恢复到初始...

后台管理平台编辑表格: 后台管理平台，编辑表格： 1. 非编辑模式：可对每行进行选择；反选；取消选择 2. 编辑模式: 进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变退出编辑模式时，所有的行进入非编...

Html+js实现表格可编辑，并能动态添加删除行: 功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。 <!DOCTYPE ...

bootstrap table 行内编辑+自定义按钮导出: 1.bootstrap table的引入 <link rel="stylesheet" href="css/bootstrap-table.min.css"> <script type="text/javascript" src="...script type

【SSM分布式架构电商项目-08】后台管理系统编辑商品信息: 商品的编辑数据的编辑核心是：数据回显。 编辑按钮事件 1、判断选中的行数 2、弹出window 当窗口打开加载的时候回显数据。 3、加载编辑页面，在页面加载完时完成回显获得选中的数据。 $...

EasyUI——实现前面写的添加按钮的功能和修改按钮的功能: 文章目录添加的实现dao层写添加user与修改user的方法前台代码弹框的实现写js的方法，实现打开弹框给弹框加两个按钮实现关闭按钮的方法补写一个清空的方法定义一个全局变量url实现保存按钮的方法搭建后台的Servlet...

js和jQuery实现双击表格变为可编辑状态: 双击单元格，将其变为文本框

PHP+Ajax+Mysql+jeditable无刷新编辑表格: 本文通过editable插件实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”保存到数据库；当点击“取消”按钮，则页面恢复到初始状态。 [img]...

在昨天作业的基础上添加：删除按钮，修改并保存按钮 和添加按钮。完成这些按钮所对应的功能/新建页面...: 1. 在昨天作业的基础上添加：删除按钮，修改并保存按钮 和添加按钮。完成这些按钮所对应的功能（XmlDocument）。前台： http://www.w3.org/1999/xhtml"> .style1 { width: 82px; ...

Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹: 版本： django：2.1.7 ...输入内容后，当单元格失去焦点时，保存输入的内容；回车后通过AJAX提交后台完成新建文件夹。 HTML部分代码，id="table2"和EditType="TextBox"后面需要用到。 <button class...

Jquery easyui开启行编辑_增删改操作及新增就能编辑: 2.选中行点击修改按钮编辑 3.右键选择相关的操作可能中间有部分功能没有实现 var datagrid; $(function() { editRow = undefined ; //保存当前正在编辑的行,控制同一时间只开启一行 $('

easyui开启行编辑_增删改操作及新增就能编辑: easyui开启行编辑_增删改操作及新增就能编辑下面这个是一个单独的js文件,可以直接在页面引入他就可以用了主要有三种方式实现编辑模式增...2.选中行点击修改按钮编辑 3.右键选择相关的操作可能中间有部分功能没有实现

ASP.NET中利用Repeater实现增删改操作: 有这样一个需求，就是页面上一个"添加"按钮，点击后在Repeater内动态生成一行，用户填写后保存并显示在Repeater中。在Repeater内部的每项都有一个编辑和删除功能，点击“编辑”后，出现“更新”和“取消”按钮。 ...

查询后点击编辑（成功之后）再跳转到我搜索到的列表界面: @model DeJin.EasyCare.WebUI.Areas.Cms.Models.ArticlesIndexModel @{ ViewBag.Title = "文章分类列表"; Layout = "~/Views/Shared/_Layout.cshtml"; ...~/Assets/them...

boostrap行内修改编辑（整行修改，统一提交）: 最近一个项目，提到了可以用行内样式编辑最好，要求是，一个html table，一行的最后有个编辑按钮，然后点击编辑以后，能对这行进行修改。如果确认修改点击确认，可以对整行进行修改。如果，不想修改了则直接点击取消...

相关热词 c# task 返回类型 c#什么时候用队列 c# 单件实例延时加载 c# 本地监听 c# 如果是红色 c# 多行字符串 c#删除某列 c# items 遍历 c# txt去重复 c# endinvoke