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. WordVBA常用项

    将光标所在段落选中 Selection.MoveUp unit:=wdParagraphSelection.MoveDown unit:=wdParagraph, Extend:=wdExtend ' ...

  2. 检测Python程序的执行效率

    无意中被问到代码执行效率的问题,那就总结一下检测代码执行效率的几种方式: 一.装饰器 在函数上加装饰器,来得到函数的执行时间. def cst_time(func, *args, **kwargs): ...

  3. urllib2模块的基本使用（四）

    urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 在Python中有很多库可以用来抓取网页,我们先学习urllib2. urllib2 是 P ...

  4. scrapy与redis实战

    从零搭建Redis-Scrapy分布式爬虫 Scrapy-Redis分布式策略: 假设有四台电脑:Windows 10.Mac OS X.Ubuntu 16.04.CentOS 7.2,任意一台电脑都 ...

  5. React基本实例

    学习React不是一蹴而就的事情,入门似乎也没那么简单.但一切都是值得的. 今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程.认真完成这个实例 ...

  6. SimpleReflection

    [SimpleReflection] 取法线的x.y作为reflection-map的uv. Shader "Custom/SimpleReflection" { Properti ...

  7. unity animation readonly 无法加事件？

    目前找到的解决方案是用代码加Event: using System.Collections; using System.Collections.Generic; using UnityEngine; ...

  8. ios 获取当前wifi名称

    ios5之前可以通过读取配置文件获取,ios5以后苹果修改wifi列表文件位置,只有root权限才可以读取. ios4:/System/Library/SystemConfiguration/WiFi ...

  9. git 常见报错

    1. refusing to merge unrelated histories : 拒绝合并无关的历史 teminal中输入 git pull origin master --allow-unrel ...

  10. Eigen库和STL容器冲突问题

    博客参考:https://blog.csdn.net/huajun998/article/details/54311561 在程序中想使用类似于如下的容器 std::vector<Eigne:: ...