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. 765. Couples Holding Hands

    ▶ n 对夫妻共 2n 个人随机坐成一排,“交换其中某两人的位置” 称为一次操作,求最少的操作此次数,使 n 对夫妻两人都相邻.初始座位为非负整数列 D1n-1,其中值为 2k 和 2k+1 的两个元 ...

  2. requests接口测试——身份认证

    当调用者访问接口时需要进行用户认证(用户名密码的登录),只有通过了认证才允许调用者访问接口. 1.基本身份认证 许多要求身份认证的web服务都接受HTTP Basic Auth.这是最简单的一种身份认 ...

  3. ScheduledThreadPoolExecutor 线程池调度 使用

    package other; import java.util.concurrent.Callable; import java.util.concurrent.Executors; import j ...

  4. python's decorator&wrapper

    [python's decorator&wrapper] decorator A function returning another function, usually applied as ...

  5. sql中从指定位置截取指定长度字符串

    1. 字符串函数应用 --从指定索引截取指定长度的字符串 ,) --获取字符串中指定字符的索引(从1开始) select charindex(',','ab,cdefg') --实际应用中的语句 , ...

  6. loadrunner--vugen录制脚本提示“无Internet访问。您可能无法录制并执行业务进程”

    1.vugen录制脚本提示如下,为什么会提示这个呢?这个提示忽略会对录制脚本有影响吗?最好应该怎么操作? 惠普技术支持回复: 您可以试试,若点击“Yes”,是否可以继续录制网站?若可以的话,您也确定网 ...

  7. Disruptor 系列（一）快速入门

    Disruptor 系列(一)快速入门 Disruptor:是一个开源的并发框架,能够在 无锁 的情况下实现网络的 Queue 并发操作,所以处理数据的能力比 Java 本身提供的并发类容器要大的多, ...

  8. 交互原型画得丑？29个优秀UI/UX线框草图

    现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用<5款高效的原型设计工具>来绘制,或者直接手绘更有逼格. 今天达人手工整 ...

  9. ForwardPriceSimulationService

    using System;using System.Collections.Generic;using System.Linq;using System.Text; using System.Coll ...

  10. struts2 action result type类型

    struts2 action result type类型 1.chain:用来处理Action链,被跳转的action中仍能获取上个页面的值,如request信息. com.opensymphony. ...