使用 Javascript 添加额外的一行 HTML 表单输入

Question

我正在尝试使用 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 = $("<tr>");

            var cols = "";

            <!--cols += '<td><select class="form-control col-md-8" id="packaging_type" name="packaging_type' + counter + '"/></td>';-->

            cols += '<td><input type="text" class="form-control" name="length' + counter + '"/></td>';

            cols += '<td><input type="text" class="form-control" name="width' + counter + '"/></td>';

            cols += '<td><input type="text" class="form-control" name="height' + counter + '"/></td>';

            cols += '<td><input type="text" class="form-control" name="weight' + counter + '"/></td>';

            cols += '<td><input type="text" class="form-control" name="quantity' + counter + '"/></td>';

            cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';

            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 访问它们。如果有更好的方法，我愿意接受建议。

Answer 1

function myFunction() {&nbsp; &nbsp; &nbsp; var table = document.getElementById("myTable");&nbsp; &nbsp; &nbsp; var row = table.insertRow(3);&nbsp;&nbsp; &nbsp; &nbsp; var cell1 = row.insertCell(0);&nbsp; &nbsp; &nbsp; var cell2 = row.insertCell(1);&nbsp; &nbsp; &nbsp; cell1.innerHTML = "NEW CELL1";&nbsp; &nbsp; &nbsp; cell2.innerHTML = "NEW CELL2";}

Answer 2

这无论如何都行不通，我建议使用 guid 而不是计数器，因为在最后一行之前删除一行会导致计数器将自身设置为与当前最后一行相同的数字。