layui 动态添加 表格数据

静态表格:

    class="layui-table" id="table" lay-filter="table">
                
价格 操作
"text" id="layui-input" class="layui-input" name="price"> class="layui-btn layui-btn-xs add">添加 class="layui-btn layui-btn-danger layui-btn-xs del">删除

添加操作:

    //因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});
    $('body').on('click', '.add', function() {
    //你要添加的html
    var html = ''+
            ''+
            ''+
                '添加'+
                '删除'+
            ''+
        '';
    //添加到表格最后
    $(html).appendTo($('#table tbody:last'));
    form.render();
   });

删除操作:

   $('body').on('click', '.del', function() {
    if ($('#table tbody tr').length === 1) {
        layer.msg('只有一条不允许删除。', {
            time : 2000
        });
    } else {
        //删除当前按钮所在的tr
        $(this).closest('tr').remove();
    }
   });

效果:

layui 动态添加 表格数据_第1张图片

 

转载于:https://www.cnblogs.com/guangzhou11/p/11592566.html

你可能感兴趣的:(layui 动态添加 表格数据)