用js动态添加表单

最新推荐文章于 2023-11-18 22:24:03 发布

墨墨萌芽

最新推荐文章于 2023-11-18 22:24:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014613378/article/details/39720701

本文介绍了如何在不依赖后台的情况下，利用JavaScript实现动态添加输入表单的功能，从而提高前端交互体验。通过HTML和JavaScript代码示例，展示了动态创建表单的实现过程。

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

在写网站前台时，就曾碰到过想动态添加输入表单。之前是想通过点击保存然后刷新页面，然后用PHP里面的for循环控制个数。将后台掺和进来这显然很低端，后来发现了js里面的一组函数，不需要后台帮助就能进行动态了，瞬间觉得世界都光明了········

HTML代码：

<table class='table' id='memberBox'>
    <tr>
        <td><input type='text' name='member[]' id='member[]' value='' class='form-control'/></td>
        <td><a href='javascript:void();' onclick='addMember()' class='btn'><i class='icon-plus'></i></a></td> 
    </tr>
</table>

javascript代码：

function addMember()
{
    var tb_member = document.getElementById('memberBox');

    var tr_member = document.createElement("tr");
    var td_member = document.createElement("td");
    var input_member = document.createElement("input");

    input_member.setAttribute("type", "text");
    input_member.setAttribute("name", "member[]");
    input_member.setAttribute("id"