您的位置：首页 > Web前端 > JQuery

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

2016-10-18 15:27 627 查看

<!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+"' onclick='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方法点击实现生成，如果哪位好汉有比较巧妙地方法评论介绍一下！

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ul li 列表 jquery 动态生成

相关文章推荐

新的分享

章节导航