jquery实现动态创建页面元素(ul,li列表实例)

最新推荐文章于 2021-11-23 00:50:47 发布

突突博客

最新推荐文章于 2021-11-23 00:50:47 发布

阅读量2.4w

点赞数 8

分类专栏： jquery 文章标签： ul li 列表 jquery 动态生成

本文链接：https://blog.csdn.net/qiang_java/article/details/52849362

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<link href="//cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
		<script>
			$(function(){
				$("#lhnum").change(function(){
					var lhnum = $("#lhnum").val();
					for(var i = 1;i<=lhnum;i++){
						$("#lhul").append("<li id='lhli'>"+i+"号楼层数：<input class='am-input-field' type='text' id='"+i+"lcnum' /><button class='am-btn am-btn-success' id='"+i+"' οnclick='addHouselc(this.id)'>+</button><ul id='lcul"+i+"'></ul></li>");
					}
				});
			});
			function addHouselc(id){
				var obj = id+"lcnum";
				var num = $("#"+obj+"").val();
				for(var j = 1;j<=num;j++){
					$("#lcul"+id+"").append("<li>第"+j+"层户数：<input class='am-input-field' type='text' id='"+j+"zhnum' /></li>");
				}
			}
		</script>
		<style>
			li{
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		添加小区:<input type="text" name="" id="xq" value="" /><br />
		添加楼号:<input type="number" name="" id="lhnum" value="" /><br />
		<ul id="lhul" class="am-list am-list-static">
			
		</ul>
	</body>
</html>

样式是随便用的amazeui的，没太细心调整，仅仅做个记录！

楼号输入框元素用jquery的change方法当输入框失去焦点时自动生成各楼输入框

本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到，所以只好写了onclick方法点击实现生成，如果哪位好汉有比较巧妙地方法评论介绍一下！

层级也没写太多，不过方法是一样的，嵌套进去就行，举个例子顺便记录一下，怕时间久远忘掉

突突博客

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
jquery实现动态创建页面元素(ul,li列表实例)

本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到，所以只好写了onclick方法点击实现生成，如果哪位好汉有比较巧妙地方法评论介绍一下！层级也没写太多，不过方法是一样的，嵌套进去就行，举个例子顺便记录一下，怕时间久远忘掉
复制链接

扫一扫