// 动态添加DOM元素，需要对DOM进行 *** 作，不太清楚你对JQ了解如何，JQ会比较简单些；
//html代码
<html><body>
<button onclick="addRow()">添加</button>
<button onclick="deleteRow()">删除</button>
<div id="domOperate">
<!-- dom *** 作放在该DIV中进行 -->
</div>
</body>
</html>
//js代码，要先引入jqueryjs
<script type="text/javascript" src="" ></script>//这里引入jquery插件<script type="text/javascrpt">
//设置DOM *** 作父级元素
var $target = $('#domOperate');
//设置需要添加元素的模版
var $addRow = $('<div class="row"><select><option value="1">下拉框</option></select><input type="text" name="inputDom" /></div>');
//添加方法
var addRow = function(){
//对目标区域添加一行
$targetappend($addRow);
}
//移除方法，此处移除最后一个添加的
var deleteRow = function(){
if($targetfind('row')length > 0){//判断是否还有添加的元素
$targetfind('row:last-child')remove();//找到最后一个删除
}else{
alert('已经没有可以删除的了');//此处也可以禁用按钮
}
}
</script>
1、打开excel这款软件，案例中已经做好了一个简单的表格。
2、选择“职务”一列，然后在菜单栏点击“数据”菜单，找到“数据有效性”按钮。
3、点击“数据有效性”选项的小箭头，在下拉子级菜单中点击“数据有效性”选项。
4、在d出的对话框设置“允许”，在允许里选择序列。
5、在来源里点击右边的“来源”按钮。
6、点击右边的选择按钮，选择单元格里职务的名称的一列数据。
7、设置好后点击“确定”。
就可以看到在职务一列里就出现了下拉菜单，至此制作下来菜单的 *** 作就完成了。
<body><button id="addform"></button></body>$(function(){$("#addform")click(function(){
var form = $("<form></form>");
var select = $("<select></select>");
var option1 = $("<option>1</option");
var option2 = $("<option>2</option");
var option3 = $("<option>3</option");
selectappend(option1);
selectappend(option2);
selectappend(option3);
var input = $("<input type='text'/>");
formappend(select);
formappend(input);
$("body")append(form);
})
})JQ其实还可以写得更少(Write
Less)。
而且你那样写有一个毛病，那就是用光标在的菜单上来回快速晃动几个，再移开光标时，你会发现，下拉的菜单它还在那里一上一下晃着。
所以要得在效果前加上一个stop
$(function(){
$('meun')hover(function(){$(this)find('ul')stop(true,true)slideDown();},
function(){$(this)find('ul')stop(true,true)slideUp('fast');
})
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）