Layui 表格编辑

html代码

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

 

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]

 

转载于:https://www.cnblogs.com/yirenipeng/p/10704076.html