jq 动态添加/删除input框,且每个input框名字name不一样,分别点击弹出窗口

淡淡的烟草味﹌ 2023-02-18 14:21 8阅读 0赞

<table border="1" style="" id="_table1">
       <tr >
           <td>序号</td>
             <td>指定运送地区：</td>
             <td>购买数(件)	：</td>
             <td>运费(元)：</td>
             <td>每增加(件)	：</td>
             <td>增加运费(元)：</td>
    		 <td>  操作</td>
       </tr>
    
        <tr>
            <td>1</td>
            <td> <input type="text" id="area1" readonly="readonly"> <input  name="fast_address1" type="hidden" value="" id="ids1"><a   onclick="clickBTN(1)" class="checkdiqu">选择地区</a></td>
            <td><input type="text" name="first_pieces1"></td>
            <td><input type="text" name="first_amount1"></td>
            <td><input type="text" name="add_pieces1"></td>
            <td><input type="text" name="add_amount1"></td>
             <td><a  onclick="del(1)">删除</a></td>
        </tr>
    
    
    
    
     	<tr id="add_form" style="background: rgb(255, 255, 255);">
            <td colspan="15"><a class="btn-add marginleft" id="add_type" href="JavaScript:void(0);" onclick="add_form()"> <span>添加</span> </a></td>
        </tr>
    
    </table>

js部分:

function clickBTN(param){ 
            layer.open({ 
                type: 1,
                title: '选择地区',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['200px' , '520px'],
                content: '<div id="div">\n' +
                    ' <form method="" id="_form" οnsubmit="return false;">\n' +
                    ' <?php foreach($list[0]['_child'] as $ke=> $value){ ?>\n' +
                    ' <input type="checkbox" value="<?php echo $value['id'];?>" name="pro<?php echo $value['id'];?>">\n' +
                    ' <?php echo $value['cityname'];?>\n' +
                    ' <ul style="list-style: none" class="pro">\n' +
                    ' <?php foreach($value['_child'] as $k => $v){ ?>' +
                    ' <li id="citys" style="display: " ><input type="checkbox" name="city<?php echo $v['id'];?>" value="<?php echo $v['id'];?>"><?php echo $v['cityname'] ; ?></li>\n' +
                    ' <?php }?>\n' +
                    ' </ul>\n' +
                    ' <?php }?>\n' +
                    ' <button style="margin: 20px 0px 20px 10px" class="saveA">确定</button>\n' +
                    ' </form>\n' +
                    '</div>\n',
    
                success:function (layero, index){     //弹出层加载成功后执行
    
                    $('.saveA').click(function () { 
                        var formData =$("#_form").serializeArray()
                        $.ajax({ 
                            type:"post",
                            url:"save",
                            data: formData,
    
                            success:function(result){ 
                                var re = jQuery.parseJSON(result)
                                if(re.msg == "success"){ 
                                    $('#area'+param).val(re.ids_name)
                                    $('#ids'+param).val(re.ids)
                                    layer.close(layer.index)
    
                                    // 延时1S刷新
                                    // setTimeout('location.replace(location.href)', 1000);
                                    // layer.msg('删除成功!',{icon:1,time:1000});
                                }
                                if(re.msg=="error"){ 
                                    layer.msg('删除异常!');
                                }
                            },
                            error:function () { 
                                layer.close(layer.index)
                            }
                        });
    
                    })
                }
    
            });
        }
    
    
    	    var i = 2;
    	    function add_form(){ 
    	        $("#add_form").remove();
    	
    	        var html = ' <tr>\n' +
    	            ' <td>'+ (i++) +'</td>\n' +
    	            ' <td> <input type="text" id="area'+ (i) +'" readonly="readonly"><input name="fast_address'+ (i) +'" type="hidden" value="" id="ids'+ (i) +'"><a οnclick="clickBTN('+i+')" class="checkdiqu">选择地区</a></td>\n' +
    	            ' <td><input type="text" name="first_pieces'+ (i) +'"></td>\n' +
    	            ' <td><input type="text" name="first_amount'+ (i) +'"></td>\n' +
    	            ' <td><input type="text" name="add_pieces'+ (i) +'"></td>\n' +
    	            ' <td><input type="text" name="add_amount'+ (i) +'"></td>\n' +
    	            ' <td><a οnclick="del('+i+')" id="del">删除</a></td>'+
    	            ' </tr>'+'\n' +
    	            ' <tr id="add_form" style="background: rgb(255, 255, 255);">\n' +
    	            ' <td colspan="15"><a class="btn-add marginleft" id="add_type" href="JavaScript:void(0);" οnclick="add_form()"> <span>添加</span> </a></td>\n' +
    	            ' </tr>\n';
    	
    	        $('#_table1').append(html);
        	}
    
    	    function del(param){ 
    	        $('#area'+param).parent().parent().remove();
    	    }

PHP后台保存:

$i = 0;
     foreach ($params as $k =>$v){ 
           $i++;
           if($params['fast_address'.$i]){ 
               $this->shipping_method_add($express_id,$params,$i);
           }
       }

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementui 点击删除按钮弹出提示框

在使用 elementui 的时候，如果要点击删除按钮弹出提示框，可以使用 elementui 提供的 Dialog 组件。首先，在 template 中添加 Dialog

今天药忘吃喽~/ 2023年09月25日 15:29/ 0 赞/ 121 阅读

相关 input框添加一个单位

<input type="text" name="fullName" placeholder="12" οnkeyup='this.value=this.value.repla

梦里梦外;/ 2023年06月11日 07:23/ 0 赞/ 75 阅读

相关 jq 动态添加/删除input框,且每个input框名字name不一样,分别点击弹出窗口

<table border="1" style="" id="_table1"> <tr > <td>序号</td>

淡淡的烟草味﹌/ 2023年02月18日 14:21/ 0 赞/ 9 阅读

相关 uni-app 给input框添加点击清空按钮

用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！效果图 ![在

谁借莪１个温暖的怀抱￠/ 2022年12月22日 13:25/ 0 赞/ 353 阅读

相关基于Vue的点击按钮添加一个input框

通过点击一个按钮添加一个input输入框 ![在这里插入图片描述][20210617155207564.png_pic_center] 值绑定到 items中，每一个输

朱雀/ 2022年10月07日 10:44/ 0 赞/ 203 阅读

相关 layui 表单动态添加、删除input框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2022年08月29日 09:45/ 0 赞/ 615 阅读

相关 jquery无刷新添加和删除input输入框增加减少input框

一、页面代码 <a href="" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a

旧城等待，/ 2022年06月15日 10:30/ 0 赞/ 268 阅读

相关鼠标点击input框添加阴影的效果

还是老规矩先上效果图： ![70][] 其实很简单只要你对css样式有所了解上代码css代码： \Initmenu input:focus\{ bo

末蓝、/ 2022年05月24日 10:45/ 0 赞/ 264 阅读

相关 bootstrap基于JS动态添加、删除、获取input输入框

这段代码支持动态添加、删除，bootstrap里面还有更简单的实现动态效果，我这里是需要做一些特殊的处理才使用这样的方式的，复制粘贴的时候记得把<div>里面的代码改了。

「爱情、让人受尽委屈。」/ 2022年05月13日 08:08/ 0 赞/ 1097 阅读

相关日历点击input搜索框弹出日历并且选中日期，再点击搜索框隐藏日历

打印出选中的日期： 1. <input class="input-item0" type="text" :value="searchDate" placehol

冷不防/ 2022年01月31日 00:35/ 0 赞/ 527 阅读