点击按钮让内容可以编辑保存发到后台?

peitun5884 2017-10-31 04:05:33
需求效果图

jsp代码


领导让我写,对于前端真是头大啊,只会一些简单的js啊。
写了一天了还写不出来。
需求:点击地址列的某个按钮图标,让地址可以编辑,鼠标离开或回车可以提示保存内容。
小弟最后50分,来一位大佬帮帮忙。
...全文
511 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhang15080478307 2017-11-13
  • 打赏
  • 举报
回复
引用 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,'"')+'" onblur="save(this,\''+code+'\')"/>'
span.firstChild.focus()
}
function save(el,code){
//...保存的代码,用ajax发送到code,el.value到服务器保存
el.parentNode.innerHTML=el.value.replace(/</g,'<').replace(/>/g,'>')
}
Web开发学习资料推荐 通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名 jQuery仿excel表格单元格合并插件
再次请教版主,这个方法出来的输入框的光标在文字最前面,如何弄到最后呢?
peitun5884 2017-10-31
  • 打赏
  • 举报
回复
已经搞定,1楼的方法没有问题,已经实现了,好开心。谢谢
  • 打赏
  • 举报
回复
引用 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,'"')+'" onblur="save(this,\''+code+'\')"/>'
span.firstChild.focus()
}
function save(el,code){
//...保存的代码,用ajax发送到code,el.value到服务器保存
el.parentNode.innerHTML=el.value.replace(/</g,'<').replace(/>/g,'>')
}
Web开发学习资料推荐 通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名 jQuery仿excel表格单元格合并插件
首先非常感谢解答。 有疑问:el取出来的是[object HTMLInputElement] code数据没有问题[/quote] 认真看说明。el.value才是值,el是input对象
peitun5884 2017-10-31
  • 打赏
  • 举报
回复
引用 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,'"')+'" onblur="save(this,\''+code+'\')"/>'
span.firstChild.focus()
}
function save(el,code){
//...保存的代码,用ajax发送到code,el.value到服务器保存
el.parentNode.innerHTML=el.value.replace(/</g,'<').replace(/>/g,'>')
}
Web开发学习资料推荐 通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名 jQuery仿excel表格单元格合并插件
首先非常感谢解答。 有疑问:el取出来的是[object HTMLInputElement] code数据没有问题
peitun5884 2017-10-31
  • 打赏
  • 举报
回复
谢谢大家。我都试试效果,等下给分,非常感谢。
jio可 2017-10-31
  • 打赏
  • 举报
回复
保存的oldAddr在后台修改失败的时候回滚页面已经修改的值
jio可 2017-10-31
  • 打赏
  • 举报
回复

<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
  • 打赏
  • 举报
回复
点击按钮后把<span></span>替换成<input type="text" />,可以用jquery的replaceWith()或replaceAll()替换。 input失去焦点blur(function(event){});或回车keydown(function(event){if (event.which==13) {}})就用ajax保存内容到服务器。并把<span></span>替换回来。
  • 打赏
  • 举报
回复
onclick="editAddr('${k.code"],this)"

function editAddr(code,btn){
var span=btn.previousSibling;
span.innerHTML='<input type="text" value="'+span.innerHTML.replace(/"/g,'"')+'" onblur="save(this,\''+code+'\')"/>'
span.firstChild.focus()
}
function save(el,code){
//...保存的代码,用ajax发送到code,el.value到服务器保存
el.parentNode.innerHTML=el.value.replace(/</g,'<').replace(/>/g,'>')
}


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

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧