layui 时间控件动态js渲染添加-526互联

<table class="layui-table" id="myTable">
    <thead>
    <tr>
        <th>日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="text" class="layui-input datepicker" name="date[]" lay-verify="date" readonly>
	    <i class="layui-icon layui-icon-date"></i>
        </td>
        <td>
	    <a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-sm delete-row">删除</a>
	</td>
    </tr>
    </tbody>
</table>

<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-sm add-row">添加行</a>

<script>
    // 动态js拼接添加行
    $('.add-row').on('click', function () {
        var newRow = '<tr>' +
            '<td><input type="text" class="layui-input datepicker" name="date[]" lay-verify="date" readonly></td>' +
            '<td><a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-sm delete-row">删除</a></td>' +
            '</tr>';
        $('#myTable tbody').append(newRow);

        // 渲染日期组件
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '.datepicker',
                format: 'yyyy-MM-dd',
                trigger: 'click'
            });
        });
    });

    // 删除行
    $(document).on('click', '.delete-row', function () {
        $(this).closest('tr').remove();
    });
</script>
526互联

layui 时间控件 动态js渲染添加

layui 时间控件动态js渲染添加
