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

[peitun5884]

需求效果图

jsp代码


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

[斯洛文尼亚旅游]

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表格单元格合并插件

[天际的海浪]

点击按钮后把<span></span>替换成<input type="text" />，可以用jquery的replaceWith()或replaceAll()替换。 input失去焦点blur(function(event){});或回车keydown(function(event){if (event.which==13) {}})就用ajax保存内容到服务器。并把<span></span>替换回来。

[jio可]

<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>

[jio可]

保存的oldAddr在后台修改失败的时候回滚页面已经修改的值

[peitun5884]

谢谢大家。我都试试效果，等下给分，非常感谢。

[peitun5884]

引用 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数据没有问题

[斯洛文尼亚旅游]

引用 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]

已经搞定，1楼的方法没有问题，已经实现了，好开心。谢谢

[zhang15080478307]

引用 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表格单元格合并插件

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