时间戳

首页 > 解决方案 > 如何自动增加在单击按钮时动态添加的输入字段（类型=文本）中的值？

javascript - 如何自动增加在单击按钮时动态添加的输入字段（类型=文本）中的值？

问题描述

我想在“sr.no”中有一个值。每次单击添加新子句的按钮时自动递增的字段。

html:

<div id="clauseDiv">
<div class="col-sm-12">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label col-sm-2" for="clause">Clause: </label>
            <div class="col-sm-10">
                <input type="text" class="form-control clauseHeader" v-bind:id="'clauseHeader-' + clause.contractGroupId" 
                    name="clause"  :key="index" v-bind:value="clause.contractGroupName" readonly="readonly"/>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sequence">Sr.no.: </label>
            <div class="col-sm-4">
                <input type="text" class="form-control clauseSequence" v-bind:id="'clauseSequence-' + clause.contractGroupId" name="sequence" 
                :key="index" v-bind:value="clause.sequence" />
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label col-sm-1" for="subClause">Subclause: </label>
            <div class="col-sm-11">
                    <div>
                        <textarea class="form-control subClause" v-bind:id="'subClause-' + clause.contractGroupId" 
                        :key="index" readonly="readonly"></textarea> 
                    </div>
            </div>
        </div>
    </div>
</div>

js：

var clauseHtml = '<div class="col-sm-12" id="clause-'+this.count+'">'+
                '<div class="col-sm-6">'+
                    '<div class="form-group">'+
                    '   <label class="control-label col-sm-2" for="clause">Clause: </label>'+
                    '    <div class="col-sm-10">'+
                   '        <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-'+this.count+'" name="clause" />'+
                  '      </div>'+
                 '   </div>'+
                '</div>'+
                '<div class="col-sm-4">'+
                    '<div class="form-group">'+
                  '      <label class="control-label col-sm-2" for="sequence">Sr.no: </label>'+
                 '       <div class="col-sm-4">'+
                '           <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-'+this.count+'" name="sequence"/>'+
               '        </div>'+
              '      </div>'+
             '   </div>'+
             '<div class="col-sm-2">'+
                '<div class="form-group">'+
            '       <button type="button" class="btn btn-danger deleteClause" id="deleteClause-'+this.count+'" v-on:click="deleteClause">Delete</button>'+
          '      </div>'+
         '   </div>'+
            '<div class="col-sm-12">'+
              '  <div class="form-group">'+
             '      <label class="control-label col-sm-1" for="subClause">Subclause: </label>'+
            '       <div class="col-sm-11">'+
           '           <textarea class="form-control clauseAddlTermSubClause" id="subClause-'+this.count+'" ></textarea>'+
          '         </div>'+
         '       </div>'+
        '    </div>'+
         '</div>';
                $('#clauseDiv').append(clauseHtml);
                this.count++;

从 html 中，我添加了包含“clause”、“sr.no”的 div。和“子条款”字段。我有一个按钮，当单击该按钮时，js 部分会被执行，div 会附加更多“子句”、“sr.no”。和“子条款”字段被添加。我希望新添加的 'sr.no' 字段在其中获取一个从前一个字段自动递增的值。我怎么做？

标签： javascriptjqueryhtml

解决方案

this从全局变量中删除this.count并制作count为全局变量，添加value="' + count +'"到输入中，它应该是这样的

'<input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>'

演示：

var count = 0;

$('#addClause').on('click', function() {
  var clauseHtml = '<div class="col-sm-12" id="clause-' + count + '">' +
    '<div class="col-sm-6">' +
    '<div class="form-group">' +
    '   <label class="control-label col-sm-2" for="clause">Clause: </label>' +
    '    <div class="col-sm-10">' +
    '        <input type="text" class="form-control clauseAddlTermHeader" id="clauseHeader-' + count + '" name="clause" />' +
    '      </div>' +
    '   </div>' +
    '</div>' +
    '<div class="col-sm-4">' +
    '<div class="form-group">' +
    '      <label class="control-label col-sm-2" for="sequence">Sr.no: </label>' +
    '       <div class="col-sm-4">' +
    '           <input type="text" class="form-control clauseAddlTermSequence" id="clauseSequence-' + count + '" name="sequence" value="' + count +'"/>' +
    '        </div>' +
    '      </div>' +
    '   </div>' +
    '<div class="col-sm-2">' +
    '<div class="form-group">' +
    '       <button type="button" class="btn btn-danger deleteClause" id="deleteClause-' + count + '" v-on:click="deleteClause">Delete</button>' +
    '      </div>' +
    '   </div>' +
    '<div class="col-sm-12">' +
    '  <div class="form-group">' +
    '      <label class="control-label col-sm-1" for="subClause">Subclause: </label>' +
    '       <div class="col-sm-11">' +
    '           <textarea class="form-control clauseAddlTermSubClause" id="subClause-' + count + '" ></textarea>' +
    '         </div>' +
    '       </div>' +
    '    </div>' +
    '</div>';
  
  $('#clauseDiv').append(clauseHtml);
  count++;

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addClause">addCaluse</button>
<div id="clauseDiv"></div>

推荐阅读