MVC中用jQuery加BootStrap实现动态增加删除文本输入框！

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>
复制代码

 

posted @   kismet82  阅读(2107)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae