js 实现点击按钮 连续 增加多个输入框

先贴上效果图

点击绿色的加号按钮，下面会增加相同的SQL输入框，点击N次增加N个相同的输入框。

步骤：

1 先看HTML

<div class="form-group row" id="div-SQL" style="margin-left: -200px;">
       <div for="objSqltext" class="col-md-4 control-label  text-right">
               <input name="addSQLBtn" type="image" src="img/****/add.jpg" οnclick="add****SQL()">
                <label>SQL：</label>
        </div>
        <div class="col-md-8">
              <textarea cols="1" rows="1" id="objSqltext" name="objSqltext"  class="form-control" style="height:120px;"></textarea>
         </div>

</div>

2 再看js代码：

我使用的是在div标签后面加上新的div元素、input元素等

var index=0;
  function addMutilSQL(){
   var addstep = index+1;
           $("#div-SQL").after('  <div class="form-group row" id="div-SQL'  + addstep + '" style="margin-left: -200px;" > '
                   +' <label for="obj****text + addstep + " class="col-md-4 control-label  text-right">SQL：</label> '
                   + ' <div class="col-md-8"> <textarea cols="1" rows="1" id="objSqltext + addstep + " name="objSqltext" '
                   + ' class="form-control" style="height:120px;"></textarea>'
                   + ' </div> ' +' </div> '
           );
           index+=1;
  }

在id="div-SQL"的div后面添加 新的 div

其中增加的多个id是逐渐加1操作。 

最后

以上就是神勇小笼包为你收集整理的js 实现点击按钮 连续 增加多个输入框的全部内容，希望文章能够帮你解决js 实现点击按钮 连续 增加多个输入框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。