• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

无信不立

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

在页面上动态添加和删除【添加信息的文本框】

页面上的内容:

当点击添加或删除会做出相应的操作

 

页面的html代码

 1 <li id="clid">
 2                            <div>
 3                                   姓名:<input type="text" name="guestName" class="dfinput" style="width: 150px;"/>
 4                                &nbsp;&nbsp;&nbsp;&nbsp;国别:<input name="guestState" type="text" class="dfinput" style="width: 150px;" >
 5                                &nbsp;&nbsp; 性别:&nbsp;&nbsp;<select name="guestSex">
 6                                                                    <option value="0">请选择</option>
 7                                                                    <option value="1">男</option>
 8                                                                    <option value="2">女</option>
 9                                                                </select>
10                                &nbsp;&nbsp;&nbsp;&nbsp;单位<input type="text" name="gusetUnit" class="dfinput" style="width: 150px;" />
11                                &nbsp;&nbsp;&nbsp;&nbsp;职务职称:<input type="text" name="guestJob" class="dfinput" style="width: 150px;" />
12                                <input type="button" value="删除" onclick="del(this);"><input type="button" value="添加" onclick="add();">
13                           </div>
14                      </li>
View Code

实现动态添加和删除的js代码(jquery)

 1 <script type="text/javascript">
 2     //动态添加外宾
 3     function add(){
 4         //获取要克隆的对象
 5         var cloneDiv=$("#clid div").eq(0);
 6         //克隆
 7         var newDiv=cloneDiv.clone();
 8         //添加
 9         //添加前清空值
10         $("input[type='text']",newDiv).val("");        
11         //添加
12         newDiv.appendTo("#clid");
13 
14     }
15     
16     
17     //删除
18     function del(btn){
19         //获取要删除的对象
20         var delDiv=$(btn).parent();
21         //当最后一个的时候不可删除
22         var lastDiv=$("#clid div");
23         if(lastDiv.length>1){
24             delDiv.remove();
25         }
26     }
27 </script>
View Code

 

posted on 2014-09-11 17:10  无信不立  阅读(1120)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3