jquery 实现双击编辑并保存

Jesse

2013-12-11 19:47:00

1153

最近在做一个数据修改的例子，一个个点开修改很麻烦，于是就想到ecshop后台里的 只需单击就以编辑了，在网上查阅资料，就想到双击修改，失去鼠标焦点后post执行

HTML:

jquery双击编辑并保持

标题时间地点

第一个2013北京第二个2013上海第三个2013广州

$(function() {

$(".test").dblclick(function(){

var id = $(this).attr("id");

var inval = $(this).html(); //获得td里的html内容

//把td里的html内容变为input框，并赋值

$(this).html("");

//input框获得焦点，以及失去焦点后的处理

$("#edit"+id).focus().on("blur",function() {

var editval = $(this).val(); //获得input框中的值

$(this).parent().html(editval); //把得到的值赋给input框父节点的html

//post表单提交

$.post("post.php",{id:id,val:editval},function(data) {

//alert(data);

})

})

})

})