layui怎么动态添加输入框

   2025-02-05 2250
核心提示:在Layui中,可以使用下面的代码动态添加输入框:div id=containerbutton class=layui-btn layui-btn-primary id=addInput添加输

在Layui中,可以使用下面的代码动态添加输入框:

<div id="container">    <button class="layui-btn layui-btn-primary" id="addInput">添加输入框</button></div><script>layui.use(['element', 'form'], function(){  var element = layui.element;  var form = layui.form;    // 添加输入框  $("#addInput").on("click", function() {    var inputHtml = '<div class="layui-form-item"><input type="text" name="input[]" placeholder="请输入内容" autocomplete="off" class="layui-input"></div>';    $("#container").append(inputHtml);        // 重新渲染表单元素    form.render();  });});</script>

上述代码首先在div容器中放置一个按钮,当点击按钮时,会动态地添加一个输入框到容器中。

在JavaScript代码中,首先通过layui.use方法加载elementform模块,然后在点击事件处理函数中,使用jQuery的append方法将一个输入框的HTML代码添加到容器中。

最后,调用form.render()方法重新渲染表单元素,以使新添加的输入框能够正确显示样式。

 
 
更多>同类维修知识
推荐图文
推荐维修知识
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  网站留言