ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js 动态添加删除demo

2020-02-24 17:04:45  阅读:183  来源: 互联网

标签:otherbankNum demo value js inputval 添加 var div document


最近做了个需求,如下图

 

 

 点击加号可以添加一项,点击减号删除这项,实现起来相对来说简单

html代码:

                         <div class="mui-input-row otherbankName">
                            <label style="font-size: 13px">其他银行卡开户行</label>
                            <input type="text" class="otherbankNameinput" placeholder="填写其他银行卡开户行">
                            <div class="img">
                                <img class="triangleaddicon" src="../image/addicon.png" alt="">
                            </div>
                        </div>
                        <div class="mui-input-row otherbankNum">
                            <label style="font-size: 13px">其他银行卡账号</label>
                            <input type="text" class="otherbankNuminput" placeholder="填写其他银行卡账号">
                            <div class="img">
                                <img class="triangleaddicon" src="../image/addicon.png" alt="">
                            </div>
                        </div>

js代码:当点击的时候在页面创建一个div并且插入在加号div的下面,

function addbanknum (){
    var timestamp = parseInt((new Date()).valueOf());
    var div = document.createElement("div");
    div.className = "mui-input-row otherbankNum";
    div.id = "otherbankNum"+ timestamp;
    div.innerHTML = `
    <label style="font-size: 13px">其他银行卡账号</label>
    <input type="text" class="otherbankNuminput" placeholder="填写其他银行卡账号">
    <div class="img" id="triangleminusicon${timestamp}" onclick="delefun1(${timestamp})">
         <img class="triangleminusicon" src='../image/minus.png' alt="">
    </div>
    `
    var otherbankNum = document.querySelector('.otherbankNum')
    document.getElementById("baseinfocontent").insertBefore(div,otherbankNum.nextSibling);
}
//添加银行卡账号
mui(".otherbankNum .img")[0].addEventListener('tap', function () {
    addbanknum ()
})

function addbankname () {
    var timestamp = parseInt((new Date()).valueOf());
    var div = document.createElement("div");
    div.className = "mui-input-row otherbankName";
    div.id = "otherbankName" + timestamp;
    div.innerHTML = `
    <label style="font-size: 13px">其他银行卡开户行</label>
    <input type="text" class="otherbankNameinput" placeholder="填写其他银行卡开户行">
    <div class="img" id="triangleminusicon${timestamp}" onclick="delefun2(${timestamp})">
         <img class="triangleminusicon"  src='../image/minus.png' alt="">
    </div>
    `
    var otherbankName = document.querySelector('.otherbankName')
    document.getElementById("baseinfocontent").insertBefore(div,otherbankName.nextSibling);
}
//添加银行卡开户行
mui(".otherbankName .img")[0].addEventListener('tap', function () {
    addbankname ()
})

//银行信息删除
functio delefun1(deldeidnum) {
    document.getElementById("otherbankNum" + deldeidnum).remove();
}
function delefun2(deldeidnum) {
    document.getElementById("otherbankName" + deldeidnum).remove();
}

传值:最重要的是要获取到动态添加的div,通过 document.getElementsByClassName这个方法获取到相关的input元素,返回的是一个数组,然后遍历数组获取值

//银行卡开户行信息
var bankNameinputvalueArr = []
function bankNameinputvalue() {
    var inputval = document.getElementsByClassName('otherbankNameinput')
    console.log(inputval)
    for (var i = 0; i < inputval.length; i++) {
        var bankNameinputvalue = {
            id: '',
            value:''
        }
        console.log(inputval[i]);
        console.log(inputval[i].value);
        if (inputval[i].value) {
            bankNameinputvalue.id = i
            bankNameinputvalue.value = inputval[i].value
        }
        bankNameinputvalueArr.push(bankNameinputvalue)
    }
    console.log(bankNameinputvalueArr)
}
//银行卡账号
var bankNuminputvalueArr = []
function bankNuminputvalue() {
    var inputval = document.getElementsByClassName('otherbankNuminput')
    console.log(inputval)
    for (var i = 0; i < inputval.length; i++) {
        var bankNuminputvalue = {
            id: '',
            value:''
        }
        console.log(inputval[i]);
        console.log(inputval[i].value);
        if (inputval[i].value) {
            bankNuminputvalue.id = i
            bankNuminputvalue.value = inputval[i].value
        }
        bankNuminputvalueArr.push(bankNuminputvalue)
    }
    console.log(bankNuminputvalueArr)
}

根据缓存值在页面生成div,并将值显示在input框,通过 document.querySelectorAll 获取生成的所有input,然后循环遍历把值显示在对应的input框。

if(personalbaInfo.bankNameinputvalueArr){
            for(var i = 0; i< personalbaInfo.bankNameinputvalueArr.length-1; i++){
                addbankname()
            }
            for(var j = 0; j < personalbaInfo.bankNameinputvalueArr.length; j++) {
                document.querySelectorAll('.otherbankName input')[j].value = personalbaInfo.bankNameinputvalueArr[j].value
            }
        }
        if(personalbaInfo.bankNuminputvalueArr){
            for(var i = 0; i< personalbaInfo.bankNuminputvalueArr.length-1; i++){
                addbanknum()
            }
            for(var j = 0; j < personalbaInfo.bankNuminputvalueArr.length; j++) {
                document.querySelectorAll('.otherbankNum input')[j].value = personalbaInfo.bankNuminputvalueArr[j].value
            }
        }

 

标签:otherbankNum,demo,value,js,inputval,添加,var,div,document
来源: https://www.cnblogs.com/lyt0207/p/12357612.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有