td 双击 编辑 php,table中的td可直接单击实现编辑内容

今天在编写后台的一个功能模块，遇到了在一个表格的数据列表中可实现点击 TD 单元格对单元格中内容进行修改，修改完毕后数据表里面的数据也随着修改。这样就不用再创建新的页面或者是模态框来做简单的数据修改，在一定的程序减少了代码的维护量。但要实现这个需求就涉及到 TD 的点击和编辑后的 AJAX 异步提交两个事件。

下面是实现这个需求的代码

HTML代码部分：

JQUERY代码部分：

var $newNode=$("");

var $oldTdObj=""; //用于保存TD对象

$(function(){

$(".release_people_name").click(function(){

var id = $(this).data('number');

//获取当前TD的值

var $oldValue=$(this).text();

console.log('$oldValue');

console.log($oldValue);

//是否存在input

var $ifInput=$(this).children().is('input');

if($oldTdObj!=""){

var newValue=$("#release_people_name_input").val();

console.log('newValue');

console.log(newValue);

if(typeof(newValue)!="undefined"){

setPeopleName(id, newValue);

$oldTdObj.text(newValue);

}

}

if(!$ifInput){

$(this).text('');

$oldTdObj=$(this);

$(this).append($newNode);

$newNode.val($oldValue);

$newNode.focus();

}

});

});

function setPeopleName(id, name){

$.post('POST的服务端接收地址',{people_name:name,number:id},function (result) {

result = $.parseJSON(result);

$.pkAlert(result.msg);

});

}

function doSomething(obj,evt){

var e=(evt)?evt:window.event;

if(window.event){

e.cancelBubble=true;

}else{

e.stopPropagation();

}

}