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

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

HTML代码部分：

 <td class="release_people_name" data-number="<{$item[number]}>"><{$item[people_name]}></td>

JQUERY代码部分：

var $newNode=$("<input type='text' id='release_people_name_input' style='width:150px;' maxlength='20' onclick='doSomething(this,event)'>");
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);
            }
        }
        <!--如果TD单元格中不存在input，则添加-->
        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);
    });
}
<!--js阻止冒泡事件-->
function doSomething(obj,evt){
    var e=(evt)?evt:window.event;
    if(window.event){
        e.cancelBubble=true;
    }else{
        e.stopPropagation();
    }
}

转载请注明：隨習筆記 » table中的td可直接单击实现编辑内容