JQuery点击按钮新增input框

最新推荐文章于 2023-07-17 10:27:13 发布

by__csdn

最新推荐文章于 2023-07-17 10:27:13 发布

阅读量2.6k

点赞数 2

分类专栏： jquery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/by__csdn/article/details/120062125

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

1.正常状态

2.点击添加

3. 点击添加的input框后面的添加按钮

4.点击按钮刷新规则下方表格会弹出各个排列组合，价格可以修改

5.上代码

<div class="videobox" style="margin-left:-12px;">
                        <label class="layui-form-label" style="width: 90px;">商品规格</label>
                        
                    </div>
                    <div  class="videoboxs" style="margin-left:115px;margin-top:4px;">
                        <input class="layui-btn" id="videoAddBtn" type="button" value="添加" onclick="layui.addlist()">
                        <input class="layui-btn layui-btn-normal refresh_speclist" type="button" value="刷新规格">
						<ul style="display:flex;flex-wrap:wrap;">
						    
						 </ul>
                        
                    </div>
                    <style>
                        .spec_ul{margin-top:30px;}
                        .spec_li,.specval_li{display:inline-block;width:22%;}
                        .spec_li:first-child,.specval_li:first-child{width:75%;}
                        .spec_li_son,.specval_li_son{display:inline-block;width:32%;}
                        .spec_li_son input[readonly],.specval_li_son input[readonly]{color:#929292}
                    </style>
                    <ul class="spec_ul">

                    </ul>
                    <div class="spec_val_div">

                    </div>

// 添加规格
            layui.addlist = function () {
                var len=$(".AddSpec").length +1;
                console.log(len);
                if(len>3){
                    return fasle
                }
                let number = $(".videoboxs ul li").length + 1;
                $(".videoboxs ul").append(`
                    <li style="margin-top: 6px;" class="addtypelist">
                        <div class="layui-input-inline" style="width: 40%;">
                            <input id="title`+ number + `" type="text" name="file_title" required lay-verify="required" placeholder="规格名称" autocomplete="off" class="layui-input spec_name " value=''>
                        </div>
						
						<input class="layui-btn AddSpec AddSpec`+len+`" id="videoAddBtn" type="button" value="添加">
							
                        <div class="layui-input-inline listremove" style="width: 30%;text-align: center;">
                            <span style="font-size: 16px;color: #fff;line-height: 38px;background-color: #FF5722;padding: 8px;cursor: pointer;border-radius: 5px;"> 删除</span>
                        </div>
						<div class="videoboxss">
						</div>
                    </li>
                `);
                addDelect();
            }
			// 添加规格下的参数
            $(document).on("click",".AddSpec",function(){
                var class_this='';
                if($(this).hasClass('AddSpec1')){
                     class_this='spec_val1';
                }else if($(this).hasClass('AddSpec2')){
                     class_this='spec_val2';
                }else if($(this).hasClass('AddSpec3')){
                     class_this='spec_val3';
                }
                let number = $(".videoboxss li div ").length + 1;
                	$(this).next().next('.videoboxss').append(`
                		<li style="margin-top: 6px;margin-left: 25px;" class="addtypelist">
                			<div class="layui-input-inline" style="width: 40%;">
                			    <input id="title`+ number + `" type="text" name="file_title" required lay-verify="required" placeholder="规格值" autocomplete="off" class="layui-input spec_val `+class_this+`">
                			</div>
                			<div class="layui-input-inline Slistremove" style="width: 30%;text-align: center;">
                			    <span style="font-size: 16px;color: #fff;line-height: 38px;background-color: #FF5722;padding: 8px;cursor: pointer;border-radius: 5px;"> 删除</span>
                			</div>
                		</li>
                	`);
                	addDelect();
            })

// 刷新规格
            $(document).on('click','.refresh_speclist',function () {
                $('.spec_val_div').html('');
                $('.spec_val1').each(function(){
                    var val=$(this).val();
                    console.log()
                    if($('.spec_val2').length>0){
                        if($('.spec_val3').length>0){
                            $('.spec_val2').each(function(){
                                var val2=$(this).val();
                                $('.spec_val3').each(function(){
                                    var val3=$(this).val();
                                    $('.spec_val_div').append(
                                        '<ul class="specval_ul"> ' +
                                        '<li class="specval_li"> ' +
                                        '<ul class="specval_ul_son">' +
                                        '<li class="specval_li_son"><input class="layui-input" name="spec_val_price" value="'+val+'"></li>' +
                                        '<li class="specval_li_son"><input class="layui-input" value="'+val2+'"></li>' +
                                        '<li class="specval_li_son"><input class="layui-input" value="'+val3+'"></li>' +
                                        '</ul> ' +
                                        '</li> ' +
                                        '<li class="spec_li"> ' +
                                        '<input class="layui-input" type="text" value="价格"> ' +
                                        '</li> ' +
                                        '</ul>'
                                    );
                                })
                            })


                        }else{
                            $('.spec_val2').each(function(){
                                var val2=$(this).val();
                                $('.spec_val_div').append(
                                    '<ul class="specval_ul"> ' +
                                    '<li class="specval_li"> ' +
                                    '<ul class="specval_ul_son">' +
                                    '<li class="specval_li_son"><input class="layui-input" value="'+val+'"></li>' +
                                    '<li class="specval_li_son"><input class="layui-input" value="'+val2+'"></li>' +
                                    '</ul> ' +
                                    '</li> ' +
                                    '<li class="spec_li"> ' +
                                    '<input class="layui-input" type="text" value="价格"> ' +
                                    '</li> ' +
                                    '</ul>'
                                );
                            })
                        }
                    } else{
                        $('.spec_val_div').append(
                            '<ul class="specval_ul"> ' +
                            '<li class="specval_li"> ' +
                                '<ul class="specval_ul_son">' +
                                    '<li class="specval_li_son"><input class="layui-input" value="'+val+'"></li>' +
                                '</ul> ' +
                            '</li> ' +
                            '<li class="spec_li"> ' +
                            '<input class="layui-input" type="text" value="价格"> ' +
                            '</li> ' +
                            '</ul>'
                        );
                    }
                })
            })