jquery实现动态生成和删除输入框

最新推荐文章于 2021-02-24 15:46:07 发布

mosphera

最新推荐文章于 2021-02-24 15:46:07 发布

阅读量1.0k

点赞数 1

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

本文链接：https://blog.csdn.net/mosphera/article/details/52121408

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery实现动态生成和删除输入框

因为项目里要使用到动态生成和删除输入框并且不保留原参数的方式，所以不能用hidden直接隐藏(公司使用的框架不允许form里有多余值)，因此自己做了一个动态生成和删除输入框的小例子，添加输入框时会保存原来输入框里的值，删除输入框时也会将值删除掉。

以下就是代码片：

<html>
<head>
<title>onunload test</title>
</head><script src="./js/jquery-2.0.3.min.js"></script>
<script>

var num = document.getElementsByTagName("input").length;
cun = new Array();//一个数组，用来存变动时原输入框值
var a = 0;

function onin(e,a){
    a = a; 
    cun[a] = e;
}

function addn(){
     num++;//var len = document.getElementsByTagName("input").length;
     if(num==1){
        $("div").html($("div").html()+"<span name='"+num+"'"+"><input type='text' name='"+num+"' oninput=onin(this.value,this.name) ></input></span>");
     }else{
        $("div").html($("div").html()+"<span name='"+num+"'"+">--<input type='text' name='"+num+"' oninput=onin(this.value,this.name) ></input></span>");
    }//新增输入框，注意此时原来输入框的value会被清除
    for(var i=1;i<=num;i++){
        $("div").find('input[name='+i+']').attr('value', cun[i]);//将保存在数组中的值放回原输入框value
    }
}

function deln(){
    if(num>1){
        var child = $("div").find('span[name='+num+']');
        var cc = $("div").find('input[name='+num+']');
        cun[num]='';//此处要删除数组中的元素，否则删除的输入框位置再次新增时，会直接将数组中的值赋上去
        $("div span").last().remove();//移除要删除的输入框,remove移除元素文本、数据及事件；detach只移除文本，保留数据及事件；empty只移除此元素下的内容
        num = num-1;

    }
}

</script>
<body>

<button id="a" onclick="addn()">add</button>
<button id="b" onclick="deln()">del</button>
<div></div>
</body>

</html>