jquery实例(动态操作dom元素)

最新推荐文章于 2023-07-17 10:50:27 发布

最新推荐文章于 2023-07-17 10:50:27 发布 · 278 阅读

文章标签：

#jQuery #UP #JavaScript #HTML #ViewUI

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用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>