菜单 搜索
首页 前端知识 Jquery动态表单系列：表单动态追加

Jquery动态表单系列：表单动态追加

2024-09-29 22:09:14 前端知识 前端哥 623 746 我要收藏

系列文章介绍

        本文是Jquery动态表单系列文章，有一些常见的表单知识以前都没有去深究，现在回过头来需要用到得去学习，原理都是Jquery对dom的操作，这里不选用原生Js采用Jquery简洁明了方便大家阅读，也不去用vue可以直接用组件。

本文是表单的动态追加

文章目录

系列文章介绍

前言

组件效果

点击：添加属性值

点击：添加属性值

二、效果实现

1.引入Jquery并写好模板

html页面

Js实现功能

初始效果

2.完整代码

三、Bug优化

分析：

改进：

修改后的完整代码

总结

前言

上班一年了，有一些以前觉得很厉害的功能觉得很麻烦学不会的功能，现在也能做了，写下来给刚学习的学弟学妹们做参考。

之前都没怎么能搜得到这些东西，也就觉得这个功能很高级。

一、组件来源

        博主上班的地方是做跨境有自己的后台，做商品管理的时候有需要用到多规格sku这些，它这个还有点特殊不需要每个sku单独计算库存，因为是啥都发货啥都有货的嘛，只需要做前台商品详情页下单页能看到就行。

组件效果

话不多说先给大家看看这个组件效果

点击：添加属性值

点击：添加属性值

二、效果实现

1.引入Jquery并写好模板

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

html页面

<div class="container mt-4">
    <h4>属性管理</h4>
    <div id="attributes">
    //这块是模板
        <div class="form-group row">
            <div class="col-sm-2">
                <input type="text" placeholder="属性名称，例如(尺码，颜色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-2">
                <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-1">
                <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUpload">
                <label class="btn btn-info btn-sm" for="fileUpload" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                    <span class="material-icons" style="font-size: 20px;">upload</span>
                </label>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-secondary btn-sm addValue">添加属性值</button>
                <button type="button" class="btn btn-danger btn-sm removeAttribute">删除属性</button>
            </div>
            <div class="col-sm-12 mt-2 added-values"></div>
        </div>
    </div>
    <button id="addAttribute" type="button" class="btn btn-primary btn-sm mt-2">添加属性</button>
    <button id="submitBtn" type="button" class="btn btn-success btn-sm mt-2">提交</button>
</div>

效果：（第一行刚好没有删除属性值的按钮，至少要有个属性值生的写了）

Js实现功能

1.添加属性：（蓝色按钮）

//添加属性
$('#addAttribute').on('click', function() {
        //克隆模板
        var newAttribute = $('.form-group:first').clone();
        newAttribute.find('input[type="text"]').val(''); // 清空输入框
        newAttribute.find('input[type="file"]').val(''); // 清空文件输入
        $('#attributes').append(newAttribute);
    });

2.删除属性：（红色按钮）

//处理删除按钮的点击事件
    $('#attributes').on('click', '.removeAttribute', function() {
        $(this).closest('.form-group').remove();
    });

3.添加属性值：（灰色按钮）

//处理添加属性值的点击事件
    $('#attributes').on('click', '.addValue', function() {
        var valueInput = `
            <div class="form-group row mt-2">
                <div class="col-sm-2 offset-sm-2">
                    <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
                </div>
                <div class="col-sm-1">
                    <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUploadValue">
                    <label class="btn btn-info btn-sm" for="fileUploadValue" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                        <span class="material-icons" style="font-size: 20px;">upload</span>
                    </label>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-sm removeValue">删除属性值</button>
                </div>
            </div>
        `;
        $(this).closest('.form-group').find('.added-values').append(valueInput);
    });

4.删除属性值：（红色按钮，上图还没体现出来，等下就看到了）

//处理删除属性值的点击事件
    $('#attributes').on('click', '.removeValue', function() {
        $(this).closest('.form-group.row').remove();
    });

5.提交按钮：（没有写Ajax的，只是把数据打印出来看看对不对）

//提交按钮事件
    $('#submitBtn').on('click', function() {
        let attributes = [];
        $('#attributes .form-group').each(function() {
            let attributeName = $(this).find('input[type="text"]').eq(0).val();
            let attributeValue = $(this).find('input[type="text"]').eq(1).val();
            let attributeImage = $(this).find('input[type="file"]').eq(0).prop('files')[0];

            attributes.push({
                name: attributeName,
                value: attributeValue,
                image: attributeImage ? attributeImage.name : null
            });
        });

        console.log(JSON.stringify(attributes));
        alert("提交的属性数据已打印到控制台。");
    });

初始效果

1.添加属性值

2.删除属性值，同上，一整块删掉。

3.添加属性值

4.删除属性值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>动态表单</title>
</head>
<body>
<div class="container mt-4">
    <h4>属性管理</h4>
    <div id="attributes">
        <!-- 模板 -->
        <div class="form-group row">
            <div class="col-sm-2">
                <input type="text" placeholder="属性名称，例如(尺码，颜色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-2">
                <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-1">
                <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUpload">
                <label class="btn btn-info btn-sm" for="fileUpload" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                    <span class="material-icons" style="font-size: 20px;">upload</span>
                </label>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-secondary btn-sm addValue">添加属性值</button>
                <button type="button" class="btn btn-danger btn-sm removeAttribute">删除属性</button>
            </div>
            <div class="col-sm-12 mt-2 added-values"></div>
        </div>
    </div>
    <button id="addAttribute" type="button" class="btn btn-primary btn-sm mt-2">添加属性</button>
    <button id="submitBtn" type="button" class="btn btn-success btn-sm mt-2">提交</button>
</div>
<script>
$(document).ready(function() {
    $('#addAttribute').on('click', function() {
        //克隆模板
        var newAttribute = $('.form-group:first').clone();
        newAttribute.find('input[type="text"]').val(''); // 清空输入框
        newAttribute.find('input[type="file"]').val(''); // 清空文件输入
        $('#attributes').append(newAttribute);
    });

    //处理删除按钮的点击事件
    $('#attributes').on('click', '.removeAttribute', function() {
        $(this).closest('.form-group').remove();
    });

    //处理添加属性值的点击事件
    $('#attributes').on('click', '.addValue', function() {
        var valueInput = `
            <div class="form-group row mt-2">
                <div class="col-sm-2 offset-sm-2">
                    <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
                </div>
                <div class="col-sm-1">
                    <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUploadValue">
                    <label class="btn btn-info btn-sm" for="fileUploadValue" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                        <span class="material-icons" style="font-size: 20px;">upload</span>
                    </label>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-sm removeValue">删除属性值</button>
                </div>
            </div>
        `;
        $(this).closest('.form-group').find('.added-values').append(valueInput);
    });

    //处理删除属性值的点击事件
    $('#attributes').on('click', '.removeValue', function() {
        $(this).closest('.form-group.row').remove();
    });

    //提交按钮事件
    $('#submitBtn').on('click', function() {
        let attributes = [];
        $('#attributes .form-group').each(function() {
            let attributeName = $(this).find('input[type="text"]').eq(0).val();
            let attributeValue = $(this).find('input[type="text"]').eq(1).val();
            let attributeImage = $(this).find('input[type="file"]').eq(0).prop('files')[0];

            attributes.push({
                name: attributeName,
                value: attributeValue,
                image: attributeImage ? attributeImage.name : null
            });
        });

        console.log(JSON.stringify(attributes));
        alert("提交的属性数据已打印到控制台。");
    });
});
</script>

<!-- 引入 Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</body>
</html>

2.完整代码

        上面是一个完整的教程，正常咱要实现功能也是这样的一个想法、步骤。

        实际解决问题也是这样，上大学的时候听得懂，但是无从下手，所以还是喜欢写这种手把手教程来引导一下你们，希望对你们有帮助。下面代码有小bug，所以还会有第三小节讲改bug。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>动态表单</title>
</head>
<body>
<div class="container mt-4">
    <h4>属性管理</h4>
    <div id="attributes">
        <!-- 模板 -->
        <div class="form-group row">
            <div class="col-sm-2">
                <input type="text" placeholder="属性名称，例如(尺码，颜色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-2">
                <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-1">
                <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUpload">
                <label class="btn btn-info btn-sm" for="fileUpload" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                    <span class="material-icons" style="font-size: 20px;">upload</span>
                </label>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-secondary btn-sm addValue">添加属性值</button>
                <button type="button" class="btn btn-danger btn-sm removeAttribute">删除属性</button>
            </div>
            <div class="col-sm-12 mt-2 added-values"></div>
        </div>
    </div>
    <button id="addAttribute" type="button" class="btn btn-primary btn-sm mt-2">添加属性</button>
    <button id="submitBtn" type="button" class="btn btn-success btn-sm mt-2">提交</button>
</div>
<script>
$(document).ready(function() {
    $('#addAttribute').on('click', function() {
        //克隆模板
        var newAttribute = $('.form-group:first').clone();
        newAttribute.find('input[type="text"]').val(''); // 清空输入框
        newAttribute.find('input[type="file"]').val(''); // 清空文件输入
        $('#attributes').append(newAttribute);
    });

    //处理删除按钮的点击事件
    $('#attributes').on('click', '.removeAttribute', function() {
        $(this).closest('.form-group').remove();
    });

    //处理添加属性值的点击事件
    $('#attributes').on('click', '.addValue', function() {
        var valueInput = `
            <div class="form-group row mt-2">
                <div class="col-sm-2 offset-sm-2">
                    <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
                </div>
                <div class="col-sm-1">
                    <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUploadValue">
                    <label class="btn btn-info btn-sm" for="fileUploadValue" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                        <span class="material-icons" style="font-size: 20px;">upload</span>
                    </label>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-sm removeValue">删除属性值</button>
                </div>
            </div>
        `;
        $(this).closest('.form-group').find('.added-values').append(valueInput);
    });

    //处理删除属性值的点击事件
    $('#attributes').on('click', '.removeValue', function() {
        $(this).closest('.form-group.row').remove();
    });

    //提交按钮事件
    $('#submitBtn').on('click', function() {
        let attributes = [];
        $('#attributes .form-group').each(function() {
            let attributeName = $(this).find('input[type="text"]').eq(0).val();
            let attributeValue = $(this).find('input[type="text"]').eq(1).val();
            let attributeImage = $(this).find('input[type="file"]').eq(0).prop('files')[0];

            attributes.push({
                name: attributeName,
                value: attributeValue,
                image: attributeImage ? attributeImage.name : null
            });
        });

        console.log(JSON.stringify(attributes));
        alert("提交的属性数据已打印到控制台。");
    });
});
</script>

<!-- 引入 Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</body>
</html>

三、Bug优化

分析：

        这边我们在第一个属性那边再添加一个或几个属性值的时候，然后有需要添加其他属性，就会把上面一整块都添加下来

改进：

把模板写到JavaScript里：

// 属性模板
    const attributeTemplate = `
        <div class="form-group row">
            <div class="col-sm-2">
                <input type="text" placeholder="属性名称，例如(尺码，颜色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-2">
                <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-1">
                <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUpload">
                <label class="btn btn-info btn-sm" for="fileUpload" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                    <span class="material-icons" style="font-size: 20px;">upload</span>
                </label>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-secondary btn-sm addValue">添加属性值</button>
                <button type="button" class="btn btn-danger btn-sm removeAttribute">删除属性</button>
            </div>
            <div class="col-sm-12 mt-2 added-values"></div>
        </div>
    `;

    // 初始显示一组属性
    $('#attributes').append(attributeTemplate);

在html里就没有这个，就不会以这个为模板

<div class="container mt-4">
    <h4>属性管理</h4>
    <div id="attributes"></div>
    <button id="addAttribute" type="button" class="btn btn-primary btn-sm mt-2">添加属性</button>
    <button id="submitBtn" type="button" class="btn btn-success btn-sm mt-2">提交</button>
</div>

Javascript：

//添加属性组
    $('#addAttribute').on('click', function() {
        //添加新的属性组
        $('#attributes').append(attributeTemplate);
    });

    //处理删除按钮的点击事件
    $('#attributes').on('click', '.removeAttribute', function() {
        $(this).closest('.form-group').remove();
    });

    //处理添加属性值的点击事件
    $('#attributes').on('click', '.addValue', function() {
        var valueInput = `
            <div class="form-group row mt-2">
                <div class="col-sm-2 offset-sm-2">
                    <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
                </div>
                <div class="col-sm-1">
                    <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUploadValue">
                    <label class="btn btn-info btn-sm" for="fileUploadValue" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                        <span class="material-icons" style="font-size: 20px;">upload</span>
                    </label>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-sm removeValue">删除属性值</button>
                </div>
            </div>
        `;
        $(this).closest('.form-group').find('.added-values').append(valueInput);
    });

    //处理删除属性值的点击事件
    $('#attributes').on('click', '.removeValue', function() {
        $(this).closest('.form-group.row').remove();
    });

    //提交按钮事件
    $('#submitBtn').on('click', function() {
        let attributes = [];
        $('#attributes .form-group').each(function() {
            let attributeName = $(this).find('input[type="text"]').eq(0).val();
            let attributeValue = $(this).find('input[type="text"]').eq(1).val();
            let attributeImage = $(this).find('input[type="file"]').eq(0).prop('files')[0];

            attributes.push({
                name: attributeName,
                value: attributeValue,
                image: attributeImage ? attributeImage.name : null
            });
        });

        console.log(JSON.stringify(attributes));
        alert("提交的属性数据已打印到控制台。");
    });

修改后的完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>动态表单</title>
</head>
<body>

<div class="container mt-4">
    <h4>属性管理</h4>
    <div id="attributes"></div>
    <button id="addAttribute" type="button" class="btn btn-primary btn-sm mt-2">添加属性</button>
    <button id="submitBtn" type="button" class="btn btn-success btn-sm mt-2">提交</button>
</div>

<script>
$(document).ready(function() {
    // 属性模板
    const attributeTemplate = `
        <div class="form-group row">
            <div class="col-sm-2">
                <input type="text" placeholder="属性名称，例如(尺码，颜色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-2">
                <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
            </div>
            <div class="col-sm-1">
                <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUpload">
                <label class="btn btn-info btn-sm" for="fileUpload" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                    <span class="material-icons" style="font-size: 20px;">upload</span>
                </label>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-secondary btn-sm addValue">添加属性值</button>
                <button type="button" class="btn btn-danger btn-sm removeAttribute">删除属性</button>
            </div>
            <div class="col-sm-12 mt-2 added-values"></div>
        </div>
    `;

    //初始显示一组属性
    $('#attributes').append(attributeTemplate);

    //添加属性组
    $('#addAttribute').on('click', function() {
        //添加新的属性组
        $('#attributes').append(attributeTemplate);
    });

    //处理删除按钮的点击事件
    $('#attributes').on('click', '.removeAttribute', function() {
        $(this).closest('.form-group').remove();
    });

    //处理添加属性值的点击事件
    $('#attributes').on('click', '.addValue', function() {
        var valueInput = `
            <div class="form-group row mt-2">
                <div class="col-sm-2 offset-sm-2">
                    <input type="text" placeholder="属性值，例如(黑色)" class="form-control form-control-sm">
                </div>
                <div class="col-sm-1">
                    <input type="file" accept="image/*" class="form-control-file" style="display: none;" id="fileUploadValue">
                    <label class="btn btn-info btn-sm" for="fileUploadValue" style="width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
                        <span class="material-icons" style="font-size: 20px;">upload</span>
                    </label>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-sm removeValue">删除属性值</button>
                </div>
            </div>
        `;
        $(this).closest('.form-group').find('.added-values').append(valueInput);
    });

    //处理删除属性值的点击事件
    $('#attributes').on('click', '.removeValue', function() {
        $(this).closest('.form-group.row').remove();
    });

    //提交按钮事件
    $('#submitBtn').on('click', function() {
        let attributes = [];
        $('#attributes .form-group').each(function() {
            let attributeName = $(this).find('input[type="text"]').eq(0).val();
            let attributeValue = $(this).find('input[type="text"]').eq(1).val();
            let attributeImage = $(this).find('input[type="file"]').eq(0).prop('files')[0];

            attributes.push({
                name: attributeName,
                value: attributeValue,
                image: attributeImage ? attributeImage.name : null
            });
        });

        console.log(JSON.stringify(attributes));
        alert("提交的属性数据已打印到控制台。");
    });
});
</script>

<!-- 引入 Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</body>
</html>

总结

        这就是一个比较完整的动态追加的学习例子，最近也是大四孩子们该写毕设的日期了（虽然我当时写了好几个月，传个值都不会）。

        希望通过这个项目，能让你学会了如何使用 jQuery 动态添加和管理表单元素，增强了对 Bootstrap 网格系统的理解。未来可以进一步扩展功能，例如添加表单验证、样式优化等。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18762.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！