当我单击添加行按钮时，如何在 html 中动态地将行添加到表单中？

Posted 2023-02-23

【中文标题】当我单击添加行按钮时，如何在 html 中动态地将行添加到表单中？

【英文标题】：How to dynamically add rows to a form in html when i click on add row button?

【发布时间】：2018-09-05 13:09:09

【问题描述】：

<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</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">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    <button>Add row</button>
</div>

所以，当我点击添加按钮时，我需要继续添加上面的行。当我点击添加行按钮时，如何添加这一行。

我需要将值作为 BOOKED UNDER 传递：

[
    act :,
    section:,
]

如果我有更多行，我需要以逗号分隔的形式传递值。我的js很弱，这是我第一个遇到这种问题的项目。我怎样才能以这种方式添加值。

我的vue js代码是

addForm = new Vue(
    el: "#addForm",
    data: 
        bookedUnder:[],
        act: '',
        section:'',
    ,
    methods: 
        handleSubmit: function(e) 
            var vm = this;
            data['otherNatureofOffense'] = //in the abve way
            $.ajax(
                url: 'http://localhost:3000/record/add/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) 
                    if (e.status) 
                        vm.response = e;
                        alert("success")
                     else 
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    
                
            );
            return false;
        , 
    ,
);

请帮我解决一下

【问题讨论】：

您应该在此处阅读有关 vuejs 组件的信息（他们的官方文档）：vuejs.org/v2/guide/components.html

ajax 调用是否给你一个成功提示？

是的，先生，它会给.. 但是为什么会这样，这不是我们的问题

这是我点击添加行按钮时所需要的，我需要调出另一行作为给定的行

成功时的响应值e是多少？

【参考方案1】：

如果您使用纯 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">Act '+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">Section '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</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">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    
</div>
</div>
<button id="btn">Add row</button>

【参考方案2】：

请尝试，

document.getElementById("clickMe").onclick = function ()  
        //first div
        var newDivCol = document.createElement("div");
        newDivCol.setAttribute("class","col-md-4");
        //second div
        var newDivForm = document.createElement("div");
        newDivForm.setAttribute("class","form-group label-floating");
        newDivCol.appendChild(newDivForm);

        //label
        var newlabel = document.createElement("label");
        newlabel.setAttribute("class","control-label");
        newlabel.innerHTML = "Here goes the text";
        newDivForm.appendChild(newlabel);

        //input
        var newInput = document.createElement("input");
        newInput.setAttribute("type","text");
        newInput.setAttribute("class","form-control");
        newInput.setAttribute("v-model","act");
        newDivForm.appendChild(newInput);

        var element = document.getElementById("addRowsHere");
        element.appendChild(newDivCol);
;

<div class="row" id="addRowsHere">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</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">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
</div>
<button id="clickMe">Add row</button>

https://jsfiddle.net/kkyunLzg/2/#

【讨论】：

在这种情况下添加按钮的位置

先生，我需要先显示这些行，在下面我需要提到如果需要添加行

应该做你想做的。在底部的链接，您可以查看它。

【参考方案3】：

您需要先 v-for 字段，然后像这样发布模型：

<div class="row" v-for="(book, index) in bookedUnder" :key="index">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act index</label>
            <input type="text" class="form-control" v-model="book.act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section index</label>
            <input type="text" class="form-control" v-model="book.section">
        </div>
    </div>

</div>
<button @click="addNewRow">Add row</button>



addForm = new Vue(
    el: "#addForm",
    data: 
        bookedUnder:[
          
             act: null,
             section: null,
          ,
        ],
    ,
    methods: 
        addNewRow: function() 
          this.bookedUnder.push( act: null, section: null, );
        ,
        handleSubmit: function(e) 
            var vm = this;
            $.ajax(
                url: 'http://localhost:3000/record/add/f/',
                data: vm.bookedUnder,
                type: "POST",
                dataType: 'json',
                success: function(e) 
                    if (e.status) 
                        vm.response = e;
                        alert("success")
                     else 
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    
                
            );
            return false;
        , 
    ,
);

【讨论】：

谢谢你先生..你救了我

【参考方案4】：

根据您要添加的行的类型，有不同的解决方案。

如果你只想添加 'Section'-rows，你可以在 Vue 中使用 v-for 并将对象推送到连接到 v-for 的数组中：

模板：

<div class="col-md-4" v-for="(row, index) in rows" :key="index">
  <div class="form-group label-floating">
    <label class="control-label">Section </label>
    <input type="text" class="form-control" v-model="row.section">
  </div>
</div>
<button @click="addRow">
  Add Row
</button>

JS：

 data: 
   rows: [],
   defaultRow: 
     section: 'new-row'
   
 ,
 methods: 
   addRow() 
     // Clone the default row object
     this.rows.push(Object.assign(, this.defaultRow))
   
 

如果你想添加不同类型的行，你要么必须创建 vue-components 并添加它们，要么使用不同的 defaultRows 获得创意（比如可能为不同的输入添加不同的类型）。

【讨论】：

如何获得如上问题的结果？你能帮我吗

如何以这种格式传递值 [ act :, section:, ]

我还需要在点击按钮之前显示第一行

在您可以在 v-for 上方插入 HTML 或在启动时自动调用 addRow() 之前显示行（在这种情况下，在安装 HTML 之后 alligator.io/vuejs/component-lifecycle） act 和 section 值，您可以使用类似于示例的内容扩展您的代码。这只是一个概念的示例，您必须自己实现它。