Layui 表格编辑

佚名 6年前 (2019-04-14) 随笔 1997人围观抢沙发百度已收录

html代码

<td class="My_edit"></td>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

Jquery代码

//-----[Layui表格编辑()] 
function Layui_edit(){
　　　//点击时 选中文本
    $(".My_edit").live("click",function(){
        $(this).toggle(function(){
            var text=$(this).html();
            $(this).html('<input type="text" style="min-height:24px;" class="layui-input layui-table-edit" value="'+text+'">');
            $(this).children("input").val("").focus().val(text);
            $(this).children("input").select();
        },function(){
            $(this).html($(this).children("input").val());
        })
    })
    
    
    //数据可编辑
    $(".My_edit").toggle(function(){
        var text=$(this).html();
        $(this).html('<input type="text" style="min-height:24px;" class="layui-input layui-table-edit" value="'+text+'">');
        $(this).children("input").val("").focus().val(text);
        $(this).children("input").select();
    },function(){
        $(this).html($(this).children("input").val());
    })
    //数据编辑失去焦点失效
    $(".layui-table-edit").live("blur",function(){
        var text=$(this).val();
        $(this).parent().html(text);
    })
}
//-----[Layui表格编辑END]