layui 动态添加 表格数据

静态表格:

<table class="layui-table" id="table" lay-filter="table">

                <thead>

                    <tr>

                        <td>价格</td>

                        <td>操作</td>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td><input type="text" id="layui-input" class="layui-input" name="price"></td>

                        <td>

                            <a class="layui-btn layui-btn-xs add">添加</a>

                            <a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>

                        </td>

                    </tr>

                </tbody>

            </table>


//因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});

    $('body').on('click', '.add', function() {

    //你要添加的html

    var html = '<tr>'+

            '<td><input type="text" id="layui-input" class="layui-input" name="price"></td>'+

            '<td>'+

                '<a class="layui-btn layui-btn-xs add">添加</a>'+

                '<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>'+

            '</td>'+

        '</tr>';

    //添加到表格最后

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

    }

  });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。