jquery实现input元素组添加和删除

宁静的海2006

已于 2023-04-15 20:19:53 修改

阅读量591

点赞数 1

分类专栏： js 文章标签： jquery bootstrap javascript

于 2023-04-12 22:12:06 首次发布

本文链接：https://blog.csdn.net/xurongxin2006/article/details/130118117

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写了好几次这样的方法，每次都是从头开始写，现在觉得很常用，记录下来。逐渐的完善后，希望能给其他人提供方便！

代码：

<!DOCTYPE html>
<html>
<head>
  <title>添加和删除表单示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<div style="cursor:pointer;" class="add">添加</div>
	<div id="val_field">
		<div><label>输入值：</label><input type="text" value=""><span style="cursor:pointer;" class="delete"> 删除 </span></div>
	</div>
</div>
<script>
	$(function(){
		$(".add").on("click",function(){
			$("#val_field").append('<div><label>输入值：</label><input type="text" value=""><span style="cursor:pointer;" class="delete"> 删除 </span></div>');
		});
		$("#val_field").on("click",".delete",function(){
			$(this).parent().remove();
		});
	})
	
</script>
</body>
</html>

最终做的页面（内部用的）：

1.html代码

<div class="modal fade" id="modal-update-rate">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">商家费率管理页</h4>
            </div>
            <div class="modal-body" style="word-wrap:break-word;">
                <p>加载中...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="btnMerchantRate()">提交修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
     </div>
        <!-- /.modal-dialog -->
</div>

2.js代码

// 包含jquery等部分省略
    
$(function(){
        $("#modal-update-rate").on("click",".add_field",function(){
            let length = $("#val_field").children().length;
            if(length>=7){
                alert('最多添加7个');
                return ;
            }

            $("#val_field").append('<div class="form-group"><label for="name">受益人手机号：</label><input type="number" name="benefit_phone[]" value="" placeholder="" />&nbsp;&nbsp;<label for="name">分配的比率：</label><input type="number"  name="benefit_val[]" value="" placeholder="受益人分成之和不能大于商家费率" style="width: 220px;"/><span style="cursor:pointer;" class="delete"> 删除 </span></div>');
        });
        $("#modal-update-rate").on("click",".delete",function(){
            $(this).parent().remove();
        });
    })

    /***
     * 费率问题《商家费率管理页》
     * 1.不同企业不同费率设置和展示，费率店铺分成： 4个参数 （收益企业sid 费率设定（万分之30） 受益人手机号设定 分配的比率设定（低于万分之三十？））
     * */

    $('#modal-update-rate').on('show.bs.modal', function (event) {
        modalShow.modal('hide');
        const modal = $(this);
        const $modal_dialog = modal.find('.modal-dialog');
        const button = $(event.relatedTarget); // 触发事件的按钮
        const recipient = button.data('link-id'); // 解析出data-whatever内容
        modal.find('.modal-title').text("商家费率管理页");

        $.ajax({
            type: "POST",
            dataType: "json",
            url: BASE_URL,
            data: {*******},
            success: function (result) {
                if(result.code == 1) {
                    let data = result.data;
                    let content = '<div style="cursor:pointer;width: 100px;" class="add_field">+添加受益人</div>' +
                        '<div id="val_field">';

                    if (data['benefit']) {
                        for (let i in data['benefit']) {
                            content += '<div class="form-group"><label for="name">受益人手机号：</label><input type="number" name="benefit_phone[]" value="' + i + '" placeholder="" />&nbsp;&nbsp;<label for="name">分配的比率：</label><input type="number"  name="benefit_val[]" value="' + data['benefit'][i] + '" placeholder="受益人分成之和不能大于商家费率" style="width: 220px;"/><span style="cursor:pointer;" class="delete"> 删除 </span></div>';
                        }
                    }

                    content += '</div>';

                    let text = '<form id="form-data-update" enctype="multipart/form-data" method="post">';
                    let rate_val = 30;
                    if (data['rate_val']) {
                        rate_val = data['rate_val'];
                    }
                    text += '<div class="form-group"><label for="name">商家费率：</label> <input type="number" name="rate_val" value="' + rate_val + '" placeholder="默认万分之30" />&nbsp;比如万分之30填写30，暂定为设置的费率必须大于等于万分之30</div>';
                    text += content;
                    text += '<hr><span>注意事项：<br>1.受adapay分账限制，最多受益人不能超过<span style="color:red;">7</span>个；<br>2.商家费率必须比受益人分配的总和大<span style="color:red;">30</span>，否则会导致分账失败;</span>';
                    text += '<input type="hidden" name="sid" id="sid_id" value="' + recipient + '"></form>';
                    modal.find('.modal-body').html(text);
                    modal.css('display', 'block');
                    $modal_dialog.css({
                        'margin-top': function () {
                            return ($(window).height() - $modal_dialog.height()) / 2;
                        },
                        'width': modalUpdate.width() * 0.6
                    });
                }else{
                    alert(result.msg);
                    if(data.msg == "用户身份失效，请重新登录"){
                        modalShow.modal('hide');
                        location.href = "../login.html";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("程序异常");
            }
        });
    });