html双击变成可编辑,jquery 实现双击编辑并保存
生活随笔
收集整理的這篇文章主要介紹了
html双击变成可编辑,jquery 实现双击编辑并保存
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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 实现双击编辑并保存的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux的服务分为哪两大类(linux
- 下一篇: 计算机网络英文介绍,计算机网络英文自我介