关于layui动态添加表单（干货）

最新推荐文章于 2025-07-09 16:43:57 发布

Zdde_

最新推荐文章于 2025-07-09 16:43:57 发布

阅读量2w

点赞数 12

CC 4.0 BY-SA版权

文章标签： layui 动态表单日期框闪退

本文链接：https://blog.youkuaiyun.com/weixin_43213137/article/details/96830008

本文介绍了在招聘系统中如何实现layui动态添加表单功能，包括动态插入表单元素及保持layui样式效果的方法，通过form.render()更新渲染以解决新添加元素失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说下需求，最近做的是一个招聘系统，需要录入应聘者的信息，为了人性化我们需要动态的添加表单！

来张截图看下
动态表单
表单里面有日期，下拉选和输入框，点击添加按钮会出来下一行

看下具体实现吧！

首先，点击添加一行需求内容这个不难。

function addstrs1(i) {
        let  iNums = getRandomNum();
        let strs1;
             strs1 = '<tr>\n' +
                 '                            <td style="display: none">\n' +
                 '                                <input type="text" name="number1" value="'+i+'">\n' +
                 '                            </td>\n' +
                 '                            <td>\n' +
                 '                                <input type="text"  name="StartTime" class="layui-input" id="test1'+iNums+'" >\n' +
                 '                            </td>\n' +
                 '                            <td>\n' +
                 '                                <input type="text" name="EndTime" class="layui-input" id="test2'+iNums+'" >\n' +
                 '                            </td>\n' +
                 '                            <td>\n' +
                 '                                <input type="text" name="Major" class="layui-input">\n' +
                 '                            </td>\n' +
                 '                            <td>\n' +
                 '                                <select name="Education" lay-filter="">\n' +
                 '                                    <option value="

最低0.47元/天解锁文章

200万优质内容无限畅学