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. Python2.X如何将Unicode中文字符串转换成 string字符串

    Python2.X如何将Unicode中文字符串转换成 string字符串   普通字符串可以用多种方式编码成Unicode字符串,具体要看你究竟选择了哪种编码:unicodestring = u&q ...

  2. Mathtype 公式显示方框

    公式编辑器mathtype中一些符号显示方框,如何解决呢?出现这个问题的原因是这是因为windows中的mtextra.ttf(显示为MT Extra (TrueType))字体文件不存在或版本太低, ...

  3. Supervisor安装与配置

    Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统 ...

  4. Group By 和Having总结

    1.Group By 概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组 所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. ...

  5. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  6. 32.使用来MethodFilterInterceptor灵活拦截

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 步骤一.建立MethodAction,代码如下: package com.a ...

  7. C#抽象类与接口的区别【转】

    一.抽象类:      抽象类是特殊的类,只是不能被实例化(可以用派生类实例化基类对象):除此以外,具有类的其他特性:重要的是抽象类可以包括抽象方法(当然它可以有普通方法),这是普通类所不能的.抽象方 ...

  8. [译]2D空间中使用四叉树Quadtree进行碰撞检测优化

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity2017.2.0f3 原文出处 : Quick Tip: Use Quadtrees to Detect Lik ...

  9. cas 退出后跳转指定页面

    退出连接 https://localhost:8888/cas/logout?service=https://localhost:8080/cas-client/login 修改cas-server配 ...

  10. placement new

    placement new就是把原本new做的两步工作分开来.第一步你自己分配内存,第二步你调用类的构造函数在自己分配的内存上构建新的对象. class Foo { float f; public: ...