- 论坛徽章:
- 0
|
转：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>
|
|
免费注册
发表于 2010-12-21 11:12
