jquery 實現(xiàn)雙擊編輯并保存

Jesse

2013-12-11 19:47:00

1153

最近在做一個數(shù)據(jù)修改的例子，一個個點開修改很麻煩，于是就想到ecshop后臺里的 只需單擊就以編輯了，在網(wǎng)上查閱資料，就想到雙擊修改，失去鼠標焦點后post執(zhí)行

HTML:

jquery雙擊編輯并保持

標題時間地點

第一個2013北京第二個2013上海第三個2013廣州

$(function() {

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

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

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

//把td里的html內容變?yōu)閕nput框，并賦值

$(this).html("");

//input框獲得焦點，以及失去焦點后的處理

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

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

$(this).parent().html(editval); //把得到的值賦給input框父節(jié)點的html

//post表單提交

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

//alert(data);

})

})

})

})

總結

以上是生活随笔為你收集整理的html双击变成可编辑,jquery 实现双击编辑并保存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。