在同一行中创建多个字段

Question

我正在尝试开发一个动态表单，如果用户单击加号图标，它应该在同一行中创建两个新字段。

我现在拥有的代码，它只创建一个字段，我试图在函数中复制相同的代码，但它只在垂直 position 中创建两个字段，而不是在同一行中。

非常感谢你！

Javascript代码

var survey_options = document.getElementById('columna');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');

function Añadir(){
    var newField = document.createElement('input');
    newField.setAttribute('type','text');
    newField.setAttribute('class','form-control');
    newField.setAttribute('placeholder','Another Field');
    survey_options.appendChild(newField);
}

function Eliminar(){
    var input_tags = survey_options.getElementsByTagName('input');
    if(input_tags.length > 2) {
        survey_options.removeChild(input_tags[(input_tags.length) - 1]);
    }
}

Html 代码

<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    
    <!-- Awsome Fonts-->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Styling -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- My Title-->
    <title>Hello, world!</title>
  </head>
  
  <body>
      
      <form class="Form" id="formulario">
          <h1>Factibilidad Técnica y Operativa</h1>
          <h2>Análisis de Infraestructura</h2>

          <!-- Campos en Columnas-->
        <div class="container" id="contenedor">
            <div class="row" id="campo">

                <div class="col" id="columna">
                    <input type="text" class="form-control" placeholder="Infraestructura">
                </div>
  
                <div class="col" id="columna">
                    <input type="text" class="form-control" placeholder="Infraestructura">
                </div>
              
            </div>
        </div>
        
          <!-- Iconos de Agregar / Eliminar Campos-->
          <div class="Controls">
              <a href="#" id="add_more_fields" onclick="Añadir()"><i class="fa fa-plus-square"></i>Añadir</a>
              <a href="#" id="removefields" onclick="Eliminar()"><i class="fa fa-minus-square"></i>Eliminar</a>
          </div>
          
      </form>
          <!-- JS Script-->    
          <script src="script.js"></script>
  </body>
</html>

Answer 1

第一个点id值不能重复。 它应该是独一无二的。 欲了解更多信息
在 html 中， input嵌入在div中，因此您应该在 JS 中遵循相同的结果以获得相同的结果。
div.col-lg-6使它们内部的标签在屏幕尺寸很大时设置为屏幕的一半。 这将有助于您的设计
正如我所说，我在 JS 中创建了div.col-lg-6.mb-2并在div中嵌入了input以获得最终结果。 mb-2给出margin-bottom
div嵌入在div#campo中，最终结果在这里

 var survey_options = document.getElementById('campo'); var add_more_fields = document.getElementById('add_more_fields'); var remove_fields = document.getElementById('remove_fields'); function Añadir(){ var newDiv = document.createElement('div'); newDiv.setAttribute('class', 'col-lg-6 mb-2') var newField = document.createElement('input'); newField.setAttribute('type','text'); newField.setAttribute('class','form-control'); newField.setAttribute('placeholder','Another Field'); survey_options.appendChild(newDiv) newDiv.appendChild(newField); } function Eliminar(){ var input_tags = survey_options.getElementsByTagName('input'); if(input_tags.length > 2) { survey_options.removeChild(input_tags[(input_tags.length) - 1]); } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <:-- Awsome Fonts--> <link rel="stylesheet" type="text/css" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <form class="Form" id="formulario"> <h1>Factibilidad Técnica y Operativa</h1> <h2>Análisis de Infraestructura</h2> <!-- Campos en Columnas--> <div class="container" id="contenedor"> <div class="row" id="campo"> <div class="col-lg-6 mb-2"> <input type="text" class="form-control" placeholder="Infraestructura"> </div> <div class="col-lg-6 mb-2"> <input type="text" class="form-control" placeholder="Infraestructura"> </div> </div> </div> <!-- Iconos de Agregar / Eliminar Campos--> <div class="Controls"> <a href="#" id="add_more_fields" onclick="Añadir()"><i class="fa fa-plus-square"></i>Añadir</a> <a href="#" id="removefields" onclick="Eliminar()"><i class="fa fa-minus-square"></i>Eliminar</a> </div> </form> </body>

更新

<!-- In HTML -->
  <a href="#" id="add_more_fields" onclick="createTwoInput()"><i class="fa fa-plus-square"></i>Añadir</a>
<!-- In Script -->
  function createTwoInput(){
      Añadir();
      Añadir();
  }

如果需要任何澄清，请在评论中提及

在同一行中创建多个字段

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-13 15:23:48

在同一行中创建多个字段

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-13 15:23:48

解决方案1
1 已采纳 2021-06-13 15:23:48