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>

关于节点追加就分享到这里了，如有错误，欢迎指正！

js动态增加ul节点li及input相关推荐

ligerui_ligerTree_005_动态增加“树”节点
动态添加ligerTree节点:效果图: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 <%@ page language= ...
js动态增加，删除td，tr，table，div
js实现的动态添加,删除table内容: 截图如下: 1. 2. 源代码: main.css body {background-image: url(../images/qiantai/bg.png) ...
html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css
功能:对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色:同时改变对应的另一个ul中li的颜色页面初始化的界面: HTML: 其他推荐: 10:21 10:22 10:25 10 ...
js中增加标签删除标签和input修改获取内容
1.增加标签创建标签:document.createElement('标签id名') 在某一标签内的最后面插入标签:c.appendChild(b): //即给c加一个孩子b,记住这个孩子是后面进来 ...
jquery 动态为ul添加li
//获取行业信息,在页面点击父类行业下拉框,查询出所有的父类行业,并加载在下拉框中 $("#parentIndustry").click(function(){ $.ajax({ ...
js动态添加svg节点
下面贴上完整代码.要注意一点:创建svg节点时,要使用createElementNS函数并传入节点名称的命名空间.否则创建出来的节点默认为html dom而不是svg dom.这样的话,将其appen ...
js动态添加删除节点
转载于:https://www.cnblogs.com/jiaobaobao/p/6762692.html
js 动态创建注释节点 createComment
const comment = document.createComment('注释') document.body.appen(commnet)
如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件一.HTML demo代码二.JS动态新增li并绑定点击事件三.效果图有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...

js动态增加ul节点li及input

js动态增加ul节点li及input相关推荐

最新文章

热门文章