html 指定插入一行,使用 Javascript 添加额外的一行 HTML 表单输入

我正在尝试使用 Javascript 动态添加一行新的 HTML 表单输入(包含 6 个输入的新行，即(类型(下拉)、长度、宽度、高度、重量和数量)到现有的“查看”HTML 表单中. 然后通过 PHP $_POST 请求在我的控制器文件中访问当前的 HTML 表单输入。通过检索 HTML 表单中的“名称”字段可以很好地工作。因此，用户完成第一行，该行是一个发货的 ID地块，他们想添加第二个地块，因此，他们单击添加(或删除)以添加或删除额外的输入行。

我的代码在不添加第二行的情况下工作。如果您将表单保留为默认值，则会检索所有 $variables 以便控制器对其进行操作。我设法从网上获取了一些 Javascript 代码，它正确地添加了输入表单的第二部分，但是，我认为代码会增加“名称”字段，以便第一批货物为 name=length，第二批货物为名称=长度2。代码也需要 Bootstrap 才能正常工作。我有 PHP、HTML 技能，但 Javascript 技能有限，因此我的请求。

$(document).ready(function() {

var counter = 0;

$("#addrow").on("click", function() {

var newRow = $("

var cols = "";

cols += '

cols += '

cols += '

cols += '

cols += '

cols += '

newRow.append(cols);

$("table.order-list").append(newRow);

counter++;

});

$("table.order-list").on("click", ".ibtnDel", function(event) {

$(this).closest("tr").remove();

counter -= 1

});

});

function calculateRow(row) {

var price = +row.find('input[name^="price"]').val();

}

最终，一旦我点击了添加行并输入了所有输入，我希望脚本以数字方式递增 HTML 表单的“名称”输入，然后能够通过 PHP $_POST 访问它们。如果有更好的方法，我愿意接受建议。