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

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

我的vue js代码是

[{
    act :,
    section:,
}]

请帮助我找到解决方案

请尝试

document.getElementById（“clickMe”）.onclick=function（）{
//第一组
var newDivCol=document.createElement（“div”）；
newDivCol.setAttribute（“类”，“col-md-4”）；
//第二组
var newDivForm=document.createElement（“div”）；
setAttribute（“类”，“窗体组标签浮动”）；
newDivCol.appendChild（newDivForm）；
//标签
var newlabel=document.createElement（“标签”）；
setAttribute（“类”、“控件标签”）；
newlabel.innerHTML=“文本在这里”；
newDivForm.appendChild（newlabel）；
//输入
var newInput=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
setAttribute（“类”、“窗体控件”）；
setAttribute（“v-model”、“act”）；
appendChild（newInput）；
var元素=document.getElementById（“addRowsher”）；
元素appendChild（newDivCol）；
};

表演
部分
添加行
如果您使用纯javascript，这可能会有所帮助


var计数=1；
$（“#btn”）。单击（函数（）{
$（“#容器”）.append（addNewRow（count））；
计数++；
});
函数addNewRow（计数）{
var newrow=''+
''+
''+
'动作'+计数+'+
''+
''+
''+
''+
''+
'节'+count+'''+
''+
''+
''+    
'';
返回新行；
}

表演
部分
添加行
根据要添加行的类型，有不同的解决方案

如果只想添加“Section”-行，可以在Vue中使用v-for并将对象推送到连接到v-for的阵列：

模板：

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;
        }, 
    },
});

如果要添加不同类型的行，您必须创建vue组件并添加这些组件，或者使用不同的defaultRows进行创作（例如可能为不同的输入添加不同类型）。
您需要先对字段进行v-for，然后像这样发布模型：

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


Act{{index}
第{{index}节
添加行
addForm=新Vue({
el:“添加表单”，
数据：{
簿记人：[
{
行为：无效，
节：空，
},
],
},
方法：{
addNewRow:函数（）{
this.bookedUnder.push（{act:null，section:null，}）；
},
handleSubmit:函数（e）{
var vm=这个；
$.ajax({
网址：'http://localhost:3000/record/add/f/',
数据：vm.bookedUnder，
类型：“POST”，
数据类型：“json”，
成功：职能（e）{
如果（如状态）{
vm.response=e；
警惕（“成功”）
}否则{
vm.response=e；
console.log（vm.response）；
警报（“失败”）
}
}
});
返回false；
}, 
},
});
您应该在这里阅读有关vuejs组件的信息（它们的官方文档）：ajax调用是否会向您发出成功警报？是的，先生，它会。。但为什么会这样，这不是我们的问题这是我在单击“添加行”按钮时需要的，我需要显示另一行作为给定行成功时的响应值e是多少？在这种情况下，在何处添加按钮先生，我需要首先显示这些行，在下面我需要提到“添加行”，如果需要，应该执行您想要的操作。在链接的底部，您可以在那里检查它。如何获得上述问题中的结果？请您帮助我如何以这种格式传递值[{act:，section:，}]另外，我需要在单击按钮之前显示第一行以显示该行，然后才能在v-for上方插入HTML或在开始时自动调用addRow（）（在这种情况下，是在装载HTML之后）要保留act和section值，您可以使用类似于示例的内容扩展代码。这只是一个概念的示例，您必须自己实现它。谢谢您，先生。。你救了我
<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>

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

<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;
        }, 
    },
});