添加新一行的解决方案 

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>新建</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/datepicker.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">

  <script src="js/jquery-2.2.4.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/bootstrap-select.js"></script>
  <script type="text/javascript">  
        $(window).on('load', function () {  
  
            $('.selectpicker').selectpicker({  
                'selectedText': 'cat'  
            });  
  
        });  
</script>
  <style type="text/css">
    .center {
             width: auto;
             display: table;
             margin-left: auto;
             margin-right: auto;
            }
     .text-center {
         text-align: center;
         }
 </style>
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top" style="background-color:#D3D3D3">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">首页</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="index.html">
            新建
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li>
          <a href="#">订单管理</a>
        </li>
        <li>
          <a href="#">添加初始库存</a>
        </li>
        <li>
          <a href="#">产品管理</a>
        </li>
        <li>
          <a href="#">部门管理</a>
        </li>
      </ul>
    </div>
  </nav>
  <br/>
  <br/>
  <br/>
  <form role="form">
    <div class="form-group col-sm-12">
      <label for="name">单号:</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入单号"></div>

    <div class="form-group col-sm-12">
      <label for="name">日期:</label>
      <input type="text" class="datepicker form-control" placeholder="请选择日期" />

    </div>
    <div class="form-group col-sm-12">
      <label for="name">发货部门:</label>
      <select class="form-control">
        <option value="">铸造车间</option>
        <option value="">迪沙线</option>
        <option value="">变形库</option>
        <option value="">铸件库</option>
        <option value="">焊补库</option>
      </select>
    </div>
    <div class="form-group col-sm-12">
      <label for="name">领用部门:</label>
      <select class="form-control">
        <option value="">铸造车间</option>
        <option value="">迪沙线</option>
        <option value="">变形库</option>
        <option value="">铸件库</option>
        <option value="">焊补库</option>
      </select>
    </div>
    <br/>
    <div class="row">
      <div class="col-xs-4 form-group">
        <input type="text" class="form-control" id="name" 
         placeholder="经办人"></div>
      <div class="col-xs-4 form-group">
        <select class="form-control col-sm-4 selectpicker" multiple data-live-search="true" data-size="5">
          <option value="">890890r9</option>
          <option value="">fewgew112</option>
          <option value="">321412frwe</option>
          <option value="">fewkjimofew</option>
          <option value="">fenknimo8</option>
          <option value="">890890r9</option>
          <option value="">fewgew112</option>
          <option value="">321412frwe</option>
          <option value="">fewkjimofew</option>
          <option value="">fenknimo8</option>
          <option value="">890890r9</option>
        </select>
      </div>
      <div class="col-xs-4 form-group">
        <input type="text" class="form-control" id="name" 
         placeholder="数量"></div>
    </div>

  </form>
       <a href="#" id="name1" class="btn btn-info">增加一组产品-数量</a>

<div id="inputs" class="col-xs-4 form-group"> 
<div > 
<input type="text" class="form-control" name="mytext[]" id="field_1" placeholder="经办人"/>

<a href="#" class="removeclass">删除</a>
</div>  
  </div>
<script type="text/javascript">
$(document).ready(function() {   
var MaxInputs       = 100; 
var InputsWrapper   = $("#inputs");
var AddButton       = $("#name1");    
var x = InputsWrapper.length; 
var count=1;   
$(AddButton).click(function (e)  
{  
  if(x <= MaxInputs) 
        {  
            count++;           
            $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ count +'" placeholder="经办人"  class="form-control"/><a href="#" class="removeclass">删除</a></div>');  
            x++; 
        }  
return false;  
});  
  
$("body").on("click",".removeclass", function(e){  
        if( x > 1 ) {  
                $(this).parent('div').remove(); 
                x--; 
        }  
return false;  
})   
  
});  
</script>
</body>
</html>

 

posted @ 2016-08-16 18:24  吴小二  阅读(221)  评论(0)    收藏  举报