最近在做后臺功能開發的時候，用到對排序字段的修改，感覺只為了修改一個排序值，而要重新進入編輯頁比較麻煩，于是網上找點資料自己動手寫了一個jquery雙擊實現直接修改排序值的效果：

html代碼：

{$sort}

JS代碼：

//雙擊修改排序

$('.changeSort').dblclick(function(){

var url = "{:U('setSort')}";

var td = $(this);

var id = td.attr('id');

var text = td.text();

var txt = $("").val(text);

txt.blur(function(){

// 失去焦點，保存值。于服務器交互自己再寫,最好ajax

var newText = $(this).val();

$.ajax({

url:url,

type:'POST',

data:{'tid':id,'sort':newText},

dataType:'json',

success:function(res){

if(res.flag==1){

layer.msg(res.msg);

// 移除文本框,顯示新值

$(this).remove();

td.text(newText);

}else if(res.flag==3){

layer.msg(res.msg);

txt.val(newText);

}

}

});

});

td.text("");

td.append(txt);

});

PHP代碼：

/**

* ajax 設置排序值

*/

public function setSort(){

if(IS_POST){

$tid = I('post.tid');

$sort = I('post.sort');

if(!is_numeric($sort)){

$arr = array(

'flag'=>3,

'msg'=>'請輸入數字',

'link'=>'',

'content'=>''

);

$this->ajaxReturn($arr);

}

$data = array(

'id'=>$tid,

'sort'=>$sort

);

$this->mod_sort = M('Sort');

$res = $this->mod_sort->save($data);

if($res){

$arr = array(

'flag'=>1,

'msg'=>'排序值設置成功',

'link'=>'',

'content'=>''

);

}else{

$arr = array(

'flag'=>2,

'msg'=>'排序值設置失敗',

'link'=>'',

'content'=>''

);

}

}else{

$arr = array(

'flag'=>0,

'msg'=>'請求非法！',

'link'=>'',

'content'=>''

);

}

$this->ajaxReturn($arr);

}

?>

效果如下圖：

以上就是本文的全部內容，希望對大家的學習有所幫助。

總結

以上是生活随笔為你收集整理的ajax改变div内容,jquery ajax双击div可直接修改div中的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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