http://www.freejs.net/article_biaodan_278.html

这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆。

修改后效果如下

@model PwtsWeb.Models.PhoneNum
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<title>UserAdd</title>
</head>
<body>
<!-- 模态框(Modal) -->
<div class="modal show" id="userAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
新增用户信息
</h4>
</div>
<div class="modal-body">
@using (Html.BeginForm("UserAdd", "PhoneBook", FormMethod.Post))
{ <div class="form-group">
<label>单位/姓名</label>
@Html.TextBoxFor(c => c.UserInfo.Name, new { @class = "form-control input-sm" })
</div>
<div class="form-group">
<label>电话</label> <div id="telNum" class="input-group">
@Html.TextBoxFor(c => c.Tel, new { @class = "form-control input-sm" })
<span class="input-group-btn">
<button id="addNum" class="btn btn-default btn-sm" type="button">+</button>
</span>
</div><!-- /input-group --> </div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
保存
</button> </div> } </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div> <script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script> <script>
$(document).ready(function ()  { 
var  MaxInputs        =  8; //maximum input boxes allowed  
var InputsWrapper = $("#telNum"); //Input boxes wrapper ID  
var AddButton = $("#addNum"); //Add button ID   var  x  =  InputsWrapper.length; //initlal text box count  
var  FieldCount = 1; //to keep track of text box added   $(AddButton).click(function  (e)  //on add input button click  
{
if (x <= MaxInputs) //max input box allowed  
        {
            FieldCount++; //text box added increment  
            //add input box  
            $(InputsWrapper).after('<div id="telNum" class="input-group">@Html.TextBoxFor(c => c.Tel, new { @class = "form-control input-sm" })<span class="input-group-btn"><button id="removeNum" class="btn btn-default btn-sm" type="button">-</button></span></div>');
            x++; //text box increment  
        }
return  false;
}); $("body").on("click", "#removeNum",  function (e) { //user click on remove text  
if ( x > 1 ) {
$(this).parent().parent('div').remove(); //获取当前元素的父元素的父元素的DIV并删除
                x--; //decrement textbox  
        }
return  false;
})   
});
</script>
</body>
</html>

MVC中用jQuery加BootStrap实现动态增加删除文本输入框!的更多相关文章

  1. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  2. Hadoop 2.6.3动态增加/删除DataNode节点

    假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...

  3. Repeater 动态增加删除一行

    文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...

  4. jquery validate 动态增加删除验证规则(转载)

    页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...

  5. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  6. jquery validate 动态增加删除验证规则

    增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...

  7. wpf动态增加删除控件

    我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...

  8. table动态增加删除

    基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...

  9. JS动态增加删除UL节点LI及相关内容示例

    <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...

随机推荐

  1. JSON格式化工具推荐

    JSON以其独特的简洁方便及与Javscript的无缝集成在WEB2.0时瓦风靡全球.   不过做为开发者,当看到一段很长的未格式化的JSON代码时,你会不会感到头晕? {"meta&quo ...

  2. 新手之:SpringBoot ——Reids主从哨兵整合(CentOS7)

    一.Redis主从搭建(一台服务器模拟多个端口) 结构图:) 1.确保安装了Redis,我装在了/opt/redis目录下.可通过"whereis redis-cli"命令查看是否 ...

  3. 项目管理工具maven(二)

    2 整合ssh框架 2.1 依赖传递 只添加了一个struts2-core依赖,发现项目中出现了很多jar, 这种情况 叫 依赖传递 2.2 依赖版本冲突的解决 1. 第一声明优先原则 <dep ...

  4. leetcode131

    深度优先遍历(DFS),先判断前一个部分是否是回文,如果是,则将其加进集合中,然后继续判断后面的回文串. 在回溯的时候,将之前加入集合的串删除,重新选择回文串.每到达一次叶子节点,得到一组结果. pu ...

  5. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  6. 3.Ehcache中储存缓存的方式

    转自:https://www.cnblogs.com/crazylqy/p/4238148.html 目录 1     堆内存(MemoryStore) 1.1     指定可用内存 1.2      ...

  7. apache启动不了, 查找错误

    今天apache启动不了, 本来以为是端口冲突, 用 cmd-> netstat -aon|findstr "80"  或 tasklist|findstr "80 ...

  8. Sqlserver filestream 引发文件数剧增

    如果不使用checkpoint,文件数会剧增 参考:https://docs.microsoft.com/zh-cn/sql/relational-databases/logs/database-ch ...

  9. nodejs API(二)

    官网所在位置:https://nodejs.org/dist/latest-v6.x/docs/api/querystring.html querystring.escape(str) 转义   qu ...

  10. LMAX系统架构

    本文转载自:LMAX系统架构 ,(非常感谢作者yfx416分享好文) 很多架构师都面临这么一个问题:如何设计一个高吞吐量,低延时的系统?面对这个问题,各位都有自己的答案.但面对这个问题,大家似乎渐渐形 ...