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>
时间: 2024-10-13 02:33:16

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

JS动态增加删除UL节点LI

JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li>

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

假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode中.ssh目录中的authorized_keys和id_rsa 2.复制Hadoop运行目录.hdfs目录及tmp目录至新的DataNode 3.在新DataNode上启动hadoop ..sbin/hadoop-daemon.sh start datanode ..sbin/yarn-daemon

Repeater 动态增加删除一行

文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rptTest.Default" %> <!DOCTYPE html

MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。

首先创建控制器,添加两个试图,一个Index  一个List  这里我用的是mysql Index.cshtml 代码 : @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @Styles.Render

JQuery动态增加删除元素

<form action="" method="post" enctype="multipart/form-data"> <label>请选择上传的图片</label> <a href="javascript:addimg()">增加图片</a> <div class="mdiv" id="mdiv"> <di

动态增加删除

<style type="text/css"> .x-j-ul{ } .x-j-btn{ width: 25px; height: 25px; border-radius: 50%; border: 1px solid #525252; color: #525252; cursor: pointer; } .x-j-ul>li:last-child{ margin-bottom: 0; } .x-j-ul>li:first-child .change-no{ d

第五部分 架构篇 第十五章 MongoDB Replica Sets 架构(动态增加删除结点)

1.Replica Set增加结点 MongoDB Replica Set不仅提供高可用性的解决方案,它也同时提供负载均衡的解决方案,增减Replica Sets结点在实际应用中非常普遍,比如当应用的读压力暴增时,3台结点的环境已经不能满足需求,那么就需要增加一些结点将压力平均分配一下,当应用的压力小时,可以减少一些结点来减少硬件资源的成本,总是是一个长期且持续的工作. 官方给我们提供了2个方案用于增加结点,一种是通过oplog来增加结点,一种是通过数据库快照(--fastsync)和oplog

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

<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=3>333333

jquery动态增加或删除tr和td【实际项目】

难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每天tr中的tr中name='对象[index].属性',必须有下标且下标要从0开始且要连续不能跳跃 (4)增加tr和td需要学习细节有: 创建td   var $tdName = $("<td class='in-ctt'></td>"); td添加内容   $td