jquery 动态添加、删除、移动dom元素
转：tommy小屋
jquery 动态添加、删除、移动dom元素
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
- <title>jquery 动态添加删除移动dom元素</title>
- <script src="js/jquery.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var fieldMax = 5;
- $("input#add").click(function(){
- if($('div.field').size() < fieldMax) {
- addField(this);
- }else{
- alert("达到最大字段数，请先删除再添加！");
- }
- });
- });
- function addField(obj) {
- $('div#fields').append(
- '<div class="field">' +
- '字段名称：'+
- '<input type="text" name="fieldTitle" /> ' +
- '<input type="button" class="up" value="上移" onclick="up(this);"/>'+
- '<input type="button" class="down" value="下移" onclick="down(this);"/>'+
- '<input type="button" class="delete" value="delete" />'+
- '</div>')
- .find("input.delete").click(function(){
- $(this).parent().remove();
- });
- }
- function up(obj){
- $(obj).parent().prev().before($(obj).parent());
- }
- function down(obj){
- $(obj).parent().next().after($(obj).parent());
- }
- </script>
- </head>
- <body>
- <div id="fields">
- <div class="field">
- 字段名称：
- <input type="text" name="fieldTitle">
- <input type="button" class="up" value="上移" onclick="up(this);"/>
- <input type="button" class="down" value="下移" onclick="down(this);"/>
- <input type="button" class="delete" value="delete"/>
- </div>
- </div>
- <input type="button" value="添加字段" id="add">
- </body>
- </html>
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
共同学习了，呵呵
学习学习