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();

        }

}

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