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

结果是有一个名为insertRow()的Javascript方法。

您只需提供表单和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。

有用的链接：

appendChild

createElement

querySeleector

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 querySeleectorAll

另请参阅：What does ${} (dollar sign and curly braces) mean in a string in 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代码输入从一开始。

$("#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。

I have Created a working Example you can check here

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

4 个答案: