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

Question

嗨，我想问一下如何在单击“添加行”按钮后添加新行。 我找到了一些 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;
}

Answer 1

原来有一个 Javascript 方法叫做insertRow() 。

您只需要通过提供表单和 ID 来处理表单，然后在 Javascript 中访问它：

var table = document.getElementById("[the ID I gave my form");

之后，对该表变量使用 insertRow() 方法并给它一个位置。 然后使用 insertCell() 将单元格添加到您刚刚创建的行中：

var row = table.insertRow(0);
var cell1 = row.insertCell(0);

Answer 2

除了使用InsertRow()，您还可以将按钮放在容器外（包含“容器”类的 div），然后使用 javascript 创建元素。

创建所有元素后，您可以简单地附加它们以遵循所需的结构。

const button = document.getElementById(#btn);

button.addEventListener('click', addRow);

function addRow(event) {
  const container = document.querySelector('.container');

  const row = document.createElement('div');
  row.classList.add('form-row');

  const group = document.createElement('div');
  group.classList.add('form-group');
  group.classList.add('col-md-7'); // Adjust after need.
  
  const label = document.createElement('label');
  label.setAttribute('for', 'myNewInputName');

  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.classList.add('form-control');
  input.setAttribute('placeholder', 'My new placeholder');


  // Assemble our structure.
  group.appendChild(label);
  group.appendChild(input);
  row.appendChild(group);
  container.appendChild(row);
}

在这里你得到了这个例子的工作沙箱：https ://codesandbox.io/s/busy-lovelace-9jw2b?file=/ src/index.js 。

---

有用的链接：

附加子项

创建元素

查询选择器

Answer 3

更简单的是使用DOMParser

 const DomParser = new DOMParser() , myForm = document.getElementById('my-form') , bt_Add = document.getElementById('btn-add') ; function newRow(numRow) { let row_N = ` <div class="form-row"> <div class="form-group col-md-7"> <label for="inputName${numRow}"></label> <input type="Name" class="form-control" id="inputName${numRow}" placeholder="Name ${numRow}"> </div> <div class="form-group col"> <label for="inputPassword${numRow}"></label> <input type="name" class="form-control" id="inputPassword${numRow}" placeholder="Position ${numRow}"> </div> </div>` return (DomParser.parseFromString(row_N, 'text/html')).body.firstChild } bt_Add.onclick =()=> { let rowCount = myForm.querySelectorAll('div.form-row').length myForm.appendChild(newRow(++rowCount)) }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <h1 class="h3 mb-4 text-gray-800">Requirement Validation Principles</h1> <div class="jumbotron jumbotron-fluid"> <div class="container"> <form action="xx" id="my-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 1"> </div> <div class="form-group col"> <label for="inputPassword1"></label> <input type="name" class="form-control" id="inputPassword1" placeholder="Position 1"> </div> </div> </form> </div> <button id="btn-add">Add row</button> <!-- /.container-fluid --> </div>

有用的链接： appendChild querySelectorAll

另请参阅： ${}（美元符号和花括号）在 Javascript 字符串中是什么意思？

Answer 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。

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