jquery 向DIV动态添加元素
<aid="btnAddSearch"href="#"class="easyui-linkbutton">添加查询栏位</a>varfields=$('#tt').dat...
<a id="btnAddSearch" href="#" class="easyui-linkbutton " >添加查询栏位</a>
var fields = $('#tt').datagrid('getColumnFields'); //得到列名
我想要的效果就是每点击按钮就添加 第一张图片里的div元素与样式,并且把获取的dataGrid列名动态写入到select里
最好加一个删除指定的动态添加元素的方法,在每一行后添加一个删除按钮 展开
var fields = $('#tt').datagrid('getColumnFields'); //得到列名
我想要的效果就是每点击按钮就添加 第一张图片里的div元素与样式,并且把获取的dataGrid列名动态写入到select里
最好加一个删除指定的动态添加元素的方法,在每一行后添加一个删除按钮 展开
2个回答
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
form{width:600px;min-height:200px;margin:50px auto;padding:20px;border:1px solid #ccc;}
#queryinput div{padding:5px 0;}
</style>
<script>
$(function(){
$("input[name='add']").click(function(event) {
$("#queryinput").append($("#queryinput div:first-child").clone(true));
});
$("input[name='del']").click(function(event) {
$(this).parent().remove();
});
})
</script>
</head>
<body>
<form>
<input type="button" name="add" value="添加查询栏位" />
<div id="queryinput">
<div>
<select>
<option>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
<input type="text">
<input type="button" name="del" value="删除" />
</div>
<div>
<select>
<option>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
<input type="text">
<input type="button" name="del" value="删除" />
</div>
</div>
</form>
</body>
</html>
写了个demo
更多追问追答
追问
如上面所见,我select写的是固定option,假如我在JS里动态给select添加option,使用clone(true)去复制,也能达到上面所写的效果吗?
追答
clone(true)会同时复制节点及其绑定的事件,假如你动态获取的事件绑定在select上,那clone后也是可以的。例如demo中删除按钮的事件,clone后照样可用
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询