jQuery雙擊編輯td數據

html

<td class="remark" style="width: 200px;">
    {$vo.remark}
</td>

js

$('table#ai').on("dblclick",".remark",function(){
    let $td=$(this);    //獲取被雙擊的td單元格
    let _t=$td.text().trim();  //被雙擊的td單元格里的文本內容
    let _w= 100; // $td.width(); //被雙擊的td單元格的寬度
    let _h= 40; // $td.height(); //被雙擊的td單元格的高度
    $td.html("");        //清空被雙擊的td單元格里的內容
    let $input=$("<input type='text' value=''>");//設置一個待添加的input表單
    //下面這句是把input表單添加到被雙擊的單元格里，
    //並設置好input表單的寬高，並讓其獲取焦點，並設置在失去焦點事的動作
    $input.appendTo($td).width(_w).height(_h).val(_t).focus().blur(function(){
        //失去焦點時，把input的值賦給td單元格
        let remark = $(this).val();
        let id = $td.parent().data('id');
        // ajax 設置備注
        $.ajax({
            type:'POST',
            url:'ajax_set_remark',
            data: {id: id,remark:remark},
            dataType:'json',
            success:function(data){
                if(data.errno == 0){
                    layer.msg(data.errdesc, {icon: 1});
                    $td.html(remark);
                    $("#update_time_"+id).html(data.date);
                }else{
                    layer.msg(data.errdesc, {icon: 5});
                    $td.html(_t);
                    return false;
                }
            }
        });

    });
});

php

/**
     * ajax添加備注
     */
public function ajax_set_remark() {
        $json = new Json();
        $id = $_POST['id'];
        $remark = $_POST['remark'];
        $women_get = M('women_get');
        $flag = $women_get->where(array('id'=>$id))->save(['remark'=>$remark,'update_time'=>time()]);
        if($flag || $flag ===0 ){
            $json->setErr(0, '操作成功');
            $json->setAttr('date', date('Y-m-d H:i'));
            $json->Send();
        }else{
            $json->setErr(10099, '操作失敗!!');
            $json->Send();
        }
}

非常的友好，非常的方便。