时间戳

首页 > 解决方案 > 单击“添加行”按钮后添加新行（html 表单）

javascript - 单击“添加行”按钮后添加新行（html 表单）

问题描述

嗨，我想问一下我们点击“添加行”按钮后如何添加新行。我找到了一些 Javascript 代码并尝试对其进行编辑，但它不起作用。提前谢谢你:) 这是我一直在使用的代码。你们能告诉我该怎么做或与我分享有关此事的任何消息来源，因为我还没有找到。Stackoverflow 中有一些类似的问题，但那里没有答案。

html代码：

<h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <form>
     <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName1"></label>
          <input type="Name" class="form-control" id="inputName1" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword1"></label>
          <input type="name" class="form-control" id="inputPassword1" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName2"></label>
          <input type="Name" class="form-control" id="inputName2" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword2"></label>
          <input type="name" class="form-control" id="inputPassword2" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName3"></label>
          <input type="Name" class="form-control" id="inputName3" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword3"></label>
          <input type="name" class="form-control" id="inputPassword3" placeholder="Position">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-7">
          <label for="inputName4"></label>
          <input type="Name" class="form-control" id="inputName4" placeholder="Name">
        </div>
        <div class="form-group col">
          <label for="inputPassword4"></label>
          <input type="name" class="form-control" id="inputPassword4" placeholder="Position">
        </div>
      </div>

  </div>

  <button id="btn">Add row</button>

javascript代码：

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;
});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Name '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Position '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

标签： javascripthtmlformsbootstrap-4

解决方案

这是完美运行的代码。

 <div class="jumbotron jumbotron-fluid" id="dataAdd">
        <div class="container">
            <div class="form-row">
              <div class="form-group col-md-7">
                <label for="inputName1"></label>
                <input type="Name" class="form-control" id="inputName1" placeholder="Name" v-model="name">
              </div>
              <div class="form-group col">
                <label for="inputPassword4"></label>
                <input type="name" class="form-control" id="inputPassword1" placeholder="Position" v-model="position">
              </div>
            </div>
            

    </div>
     <button id="btn">Add row</button>

HTML 代码输入以 1 开头。

$("#btn").click(function(){

var len=$('#dataAdd .container .form-row').length+1;

//if(len>1)

 $("#dataAdd .container:last").append(' <div class="form-row">'+
                  '<div class="form-group col-md-7">'+
                   ' <label for="inputName'+len+'"></label>'+
                   ' <input type="Name" class="form-control" id="inputName'+len+'" placeholder="Name" v-model="name">'+
                 ' </div>'+
                 ' <div class="form-group col">'+
                 '   <label for="inputPassword4"></label>'+
                 '   <input type="name" class="form-control" id="inputPassword'+len+'" placeholder="Position" v-model="position">'+
                 ' </div>'+
               '</div>');

               });
             
    });

JavaScript 代码在最后一个表单控件中添加了 HTML。

我创建了一个工作示例，您可以在此处查看

推荐阅读