js動態增加ul節點li及input

        之前也做過有關節點的追加或者刪除，但相對下面我要介紹的功能簡單多了，都是單個節點的追加或者刪除。下面小編將這個功能大概介紹一下。

        這個功能的目的是創建多級專區，類似書籍的目錄那種的，如下圖：

        這個功能的具體添加步驟如下：

1、創建根專區

        首先，在上圖input框中輸入一級專區的名稱，如果符合需求將展示在頁面上，如下圖：

        如果只添加一級專區，直接點擊‘創建’按鈕即可。

本段代碼如下：

<div class="veri">
	<p id="verip">
		<input type="text" value="" id="mucharea" data-id="input" defvalue="請輸入一級專區的名稱">
		<input type="button" value="確定" id="arersure">
		<span id="plhoder" style="color:#ccc; margin:0px 0px 0px 25px;">所有專區名稱均限30個字符</span>
	</p>
</div>
<div class="verizong" style="display:none;">
	<div class="verione">
		<input type="button" value="" id="firsearea" >
		<a class="polidy">編輯</a><a href="javascript:;" class="bigrout">刪除</a><a class="add" id="addBtn" this-id="add">添加子專區</a>
	</div>
	<div class="veribig">
		<div id="veritwo">
			<ul class="zqBar_cont">
                <div class="onezq">
                    <ul class="two">
                    	<!-- 子專區將追加到這裏 -->
                    </ul>
                </div>
	        </ul>
		</div>
	</div>
	<p id="ps" style="display:none;"> 
		<input type="button" id="vericreat" value="創建">
		<span id="tshitwo">請確保所有子專區名稱均已填寫再創建</span>
	</p>
</div>
<script type="text/javascript">
//創建一級根專區
$('#arersure').click(function(){
	var mucharea = $('#mucharea').val();
	if(mucharea == "" || mucharea =="請輸入一級專區的名稱"){  //一級根專區爲空
		$('#plhoder').text('專區名稱不可爲空').css('color','red');
	}else{
		//專區名稱校驗
		$.post("{:U('admin/AppsList/checkStrNum')}",{name:mucharea,num:1},function(data){  //長度校驗
			if(data==1){
				$('#plhoder').text('僅限30個字符').css({'color':'red'});
				return false;
			}else{
				$.post("{:U('admin/AppsList/checkRootName')}",{groupname:mucharea},function(data){  //名稱是否重複
					if(data==1){
						$('#plhoder').text('此名稱已經存在').css({'color':'red'});
						return false;
					}else{   //創建成功
						arrname[0] = mucharea;
						$('#plhoder').text('所有專區名稱均限30個字符');
						$('#firsearea').val(mucharea);
						$('.veri').hide();
						$('.verizong').show();
						$('.veribig').hide();
						$('#ps').show();
					}
				})
			}
		})
	}	
})
</script>

2、添加子專區
       如果想要繼續添加下級子專區，則點擊‘添加子專區’按鈕，會彈出一個添加的彈出框，效果如下：          

        該彈框是一個div，在裏面追加input，默認情況下，會追加一個input，代碼如下：

<div class="popUP">
    <h5>添加子專區<span class="close">X</span></h5>
    <p>請按Enter鍵輸入多個子專區名稱（每行一個，共10行，每個僅限30字符）</p>
    <div class="pupCont">
    </div>
    <div class="btns">
        <input type="button" id="sureBtn1" value="確認"><input type="button" id="cancelBtn" value="取消">
    </div>
</div>

<script type="text/javascript">
$('#addBtn').click(function(){
    index = 1;  //用於頁面取值時，判斷層級
    $('.popUP').Popss({PopName:'.popUP',closeName:''});
	$('body').css({"overflow":"scroll","overflow-y":"hidden"});
	$('.pupCont').find('input').val('').eq(0).show().siblings().remove();
	var $input = $('<input type="text" clas="inputTits"><span></span></br>');
    $('.pupCont').append($input);
    $input.focus();
})

$('.pupCont').on('keyup','input',function(ev){
	if(ev.keyCode == 13){    //enter事件
		var inputTxt = $(this).val();
		var inputTxtLen = inputTxt.replace(/[\u4E00-\u9FA5]/g,'aa').length;
		createInput();     //追加input
		$(this).blur();
		if(inputTxtLen>30){    //判斷input輸入框中字符的長度
			$(this).next().text('僅限30個字符');
			return false;
		}else{
			$(this).next().text('');
		}
	}
})

function createInput(){
    var $input = $('<input type="text" clas="inputTits"><span></span></br>');
    inputlen = $('.pupCont').find('input').length;
    if(inputlen >= 10){    //判斷input的長度，最大允許10個
    	return false;
    }else{
    	$('.pupCont').append($input);
    	$input.focus();
    }  
}
</script>

 

        上圖彈框中，如果點擊‘取消’或者右上角‘X’按鈕，則情況彈框中的內容；如果點擊‘確定’按鈕，則追加這些專區到頁面，如下：

<script type="text/javascript">
$('.close,#cancelBtn').click(function(){//取消操作
	var mucharea = $('#mucharea').val();
    $('.popUP').hide();
    $('.pupCont').empty();
    if(index == 1){
    	arrname = [];
    	arrname[0] = mucharea;
    }else{
    	for(i=0;i<num;++i){
			arrname.splice(arrname.length - 1,1)
		}
    }
	$(".PopsBg").remove();
	$('body').css({"overflow":"scroll","overflow-y":"auto"});
})

$('#sureBtn1').click(function(){  //確定操作
    insertSection();
})
function insertSection(){
	li = '';
	var flag = 1;
    var obj;
    num = 0;
    var addStr = '<span><a href="javascript:;" class="polidys">編輯</a><a href="javascript:;" class="delcel">刪除</a><a href="javascript:;" class="add">添加子專區</a></span></li>';
    if(index == 1){
        obj = $('.two');
    }else if(index == 2){
        var $three = $('<ul class="three"></ul>');
        target.parent().append($three);
        obj = target.next();
    }else{
        var $four = $('<ul class="four"></ul>');
        target.parent().append($four);
        obj = target.next();
        addStr = '<span><a href="javascript:;" class="polidys">編輯</a><a href="javascript:;" class="delcel">刪除</a></span></li>';
    }
    var $input = $('.pupCont').find('input');
    $input.each(function(index,item){
    	k++;
    	var str = $.trim($(this).val());
    	if(str != ""){
    		li += '<li id="list_'+k+'">' + '<em>'+str+'</em>' + addStr;
    	}
    	
        var len = arrname.length;
        var inputTxt = $(this).val();
		var inputTxtLen = inputTxt.replace(/[\u4E00-\u9FA5]/g,'aa').length;
        for(i=0;i<len;++i){
	   		if(inputTxtLen > 30){
	    		flag = 0;
	    		$(this).next().text('僅限30個字符');
	    		for(i=0;i<num;++i){
					arrname.splice(arrname.length - 1,1)
				}
	    		return false;
	    	}else{
	    		$(this).next().text('');
	    	}
	    	if(str == arrname[i] && str != ''){
	    		flag = 0;
        		$(this).next().text('專區名稱不能相同');
        		for(i=0;i<num;++i){
					arrname.splice(arrname.length - 1,1)
				}
        		return false;
	    	}else{
	    		$(this).next().text('');
	    	}
        } 
		flag = 1;
		num++;
		arrname[len] = str;
    })  
    if(flag){
    	obj.append(li);
	    $('.popUP').hide();
	    $('.pupCont').empty();
		$(".PopsBg").remove();
		$('.pupCont').find('input').val('').eq(0).show().siblings().remove();
		$('body').css({"overflow":"scroll","overflow-y":"auto"});  
    }
    $('.veribig').show();
	$('#ps').show(); 
}
</script>

         追加後效果如下：

        如果想要添加三級或者四級的子專區類似步驟2，效果如下：

        3、獲取頁面上的數據

        如果有二級以下的專區，則獲取如下：

<script type="text/javascript">
	var len = $(".two").children().length;  
	var erjiarr = [];
	var reg=/,$/gi;			//去掉逗號
	var regs=/\/$/gi;			//去掉斜線
	for(i=0;i<len;++i){
		var erjiname = '';
		erjiname += $(".two").children().eq(i).children('em').text();
		var sanji = $(".two").children().eq(i).attr('id');		
		var sanlen = $("#"+sanji).find('.three').children().length;			
		if(sanlen){
			erjiname += '-';				//二級和三級之間用中橫線隔開
		}
		for(k=0;k<sanlen;++k){	
			erjiname += $("#"+sanji).find('.three').children().eq(k).children('em').text();
			var siji = $("#"+sanji).find('.three').children().eq(k).attr('id');		
			var silen = $("#"+siji).find('.four').children().length;	
			if(silen){
				erjiname += '(';				//三級和四級之間用括號隔開
			}	
			for(j=0;j<silen;++j){
				erjiname += $("#"+siji).find('.four').children().eq(j).find('em').text() + ",";			//四級之間用逗號隔開
			}
			erjiname=erjiname.replace(reg,"");	
			if(silen){
				erjiname += ')';
			}
			erjiname += '/';			//三級之間用斜線隔開
		}
		erjiname=erjiname.replace(regs,"");	
		erjiarr[i] = erjiname;
	}
</script>

 

        關於節點追加就分享到這裏了，如有錯誤，歡迎指正！