如何使用Java脚本在jsp页面的表中动态添加标签<form：input>？

Question

我有一个jsp页面，在此页面中，我希望有多个具有不同输入类型的内联表行输入，因此任何行都是一个具有多个字段的对象，知道我使用此链接来设计表{{3 }}

知道添加行后在脚本文件中使用<form:input>而不是<input>时，我无法编写任何内联输入 只要我可以在Spring MVC控制器中使用它，就可以帮我添加表中的<form:input ..../>吗？ 谢谢

应用演示图片https://bootsnipp.com/snippets/402bQ

我的javaScript代码是：

$(document).ready(function () {
    var counter = 0;
    var counter_rs = 0;

    var cnt_rd = 0;
    var cnt_rsd = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        var path_val = "ruleDetails["+cnt_rd+"]";

        cols += '<td><form:input path='+path_val+".operationType"+' type="text" class="form-control" name="op_type' + counter + '"/></td>';
        cols += '<td><form:input path='+path_val+".MinPrice"+' type="number" class="form-control" name="min' + counter + '"/></td>';
        cols += '<td><form:input path='+path_val+".MaxPrice"+' type="number" class="form-control" name="max' + counter + '"/></td>';
        cols += '<td><form:input path='+path_val+".FixValue"+' type="number" class="form-control" name="fix' + counter + '"/></td>';
        cols += '<td><form:input path='+path_val+".perValue"+' type="number" class="form-control" name="per' + counter + '"/></td>';



        // cols += '<td><input type="text" class="form-control" name="op_type' + counter + '"/></td>';
        // cols += '<td><input type="number" class="form-control" name="min' + counter + '"/></td>';
        // cols += '<td><input type="number" class="form-control" name="max' + counter + '"/></td>';
        // cols += '<td><input type="number" class="form-control" name="fix' + counter + '"/></td>';
        // cols += '<td><input type="number" class="form-control" name="per' + 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++;
        cnt_rd++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        counter -= 1
    });


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

        var _newRow = $("<tr>");
        var _cols = "";


        var _path_val = "ruleShareDetails["+cnt_rsd+"]";

        _cols += '<td><form:input path='+_path_val+".operationType"+' type="text" class="form-control" name="op_type' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".minCount"+' type="number" class="form-control" name="min_val' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".maxCount"+' type="number" class="form-control" name="max_val' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".per1"+'  type="number" class="form-control" name="per1' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".per2"+' type="number" class="form-control" name="per2' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".per3"+' type="number" class="form-control" name="per3' + counter_rs + '"/></td>';
        _cols += '<td><form:input path='+_path_val+".per4"+' type="number"  class="form-control" name="per4' + counter_rs + '"/></td>';

        _cols += '<td><input type="button" class="MyibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        _newRow.append(_cols);
        $("table.order-list-share").append(_newRow);
        counter_rs++;
        cnt_rsd++;
    });


    $("table.order-list-share").on("click", ".MyibtnDel", function (event) {
        $(this).closest("tr").remove();
        counter_rs -= 1
    });


});



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

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

和我的jsp页面

 <form:form  action="${pageContext.request.contextPath}/addrulemodal" method="post"
                        modelAttribute="ruleshare" enctype="multipart/form-data">



                <!--Rule Detail-->
                <div class="border-bottom  mb-5">

                    <div class="form-group col-md-6 mx-auto">
                        <label for="title">title</label><form:errors path="title" cssClass="text-danger"/>
                        <form:input path="title" id="title" cssClass="form-control"/>
                    </div>
                    <div class="form-group col-md-6 align-content-center mx-auto">
                        <div class="form-check">
                            <div class="form-check">
                            <form:checkbox path="enabled" id="enable" value="enabled" cssClass="margin-right-20"/>
                            <label for="enable" class="custom-my-fonts">Enabled</label>
                            </div>
                        </div>
                    </div>

                    <h5 class="text-left text-dark pt-5">Rule Details</h5>
                </div>

                <div class="border-bottom mb-5">


                    <table id="tbl_rule_detail" class="table order-list">
                        <thead class="thead-dark">
                        <tr>
                            <th>operationType</th>
                            <th>MinVal</th>
                            <th>MaxVal</th>
                            <th>FixVal</th>
                            <th>perVal</th>
                        </tr>
                        </thead>
                        <tbody>



                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5" style="text-align: center">
                                <input type="button" class="btn btn-lg btn-block" id="addrow" value="AddRuleDetail">
                            </td>
                        </tr>
                        </tfoot>
                    </table>



                    <h5 class="text-left text-dark pt-5">Rule Share Details</h5>
                </div>


                <table id="tbl_rule_share_detail" class="table order-list-share">
                    <thead class="thead-dark">
                    <tr>
                        <th>operationType</th>
                        <th>MinValue</th>
                        <th>MaxValue</th>
                        <th>Per1</th>
                        <th>per2</th>
                        <th>per3</th>
                        <th>per4</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5" style="text-align: center">
                            <input type="button" class="btn btn-lg btn-block" id="addrow_rs" value="AddRuleShareDetail">
                        </td>
                    </tr>
                    </tfoot>
                </table>

                <button type="submit"
                        class="col-md-3 mx-auto btn-primary btn-lg align-content-center btn-block mb-5">Add
                    Rule
                </button>

            </form:form>

我的规则模型课

package com.calcex.model;

import javax.persistence.*;
import java.util.List;

@Entity
@Table(name = "rule_tbl")
public class Rule {


    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private boolean enabled;

    @OneToMany(mappedBy = "rule")
    List<RuleDetails> ruleDetails;

    @OneToMany(mappedBy = "rule_share")
    List<RuleShareDetail> ruleShareDetails;

    @OneToMany(mappedBy = "rule_ds")
    List<DeviceSum> deviceSumList;

    @OneToMany(mappedBy = "rule_trs")
    List<infoExcel> infoExcelList;

    @OneToMany(mappedBy = "rule_report")
    List<MontlyReport> montlyReportList;

    public Rule() {
    }

    public Rule(Long id, String title, boolean enabled) {
        this.id = id;
        this.title = title;
        this.enabled = enabled;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public boolean isEnabled() {
        return enabled;
    }

    public void setEnabled(boolean enabled) {
        this.enabled = enabled;
    }

    public List<RuleDetails> getRuleDetails() {
        return ruleDetails;
    }

    public void setRuleDetails(List<RuleDetails> ruleDetails) {
        this.ruleDetails = ruleDetails;
    }

    public List<RuleShareDetail> getRuleShareDetails() {
        return ruleShareDetails;
    }

    public void setRuleShareDetails(List<RuleShareDetail> ruleShareDetails) {
        this.ruleShareDetails = ruleShareDetails;
    }

    public List<DeviceSum> getDeviceSumList() {
        return deviceSumList;
    }

    public void setDeviceSumList(List<DeviceSum> deviceSumList) {
        this.deviceSumList = deviceSumList;
    }

    public List<infoExcel> getInfoExcelList() {
        return infoExcelList;
    }

    public void setInfoExcelList(List<infoExcel> infoExcelList) {
        this.infoExcelList = infoExcelList;
    }

    public List<MontlyReport> getMontlyReportList() {
        return montlyReportList;
    }

    public void setMontlyReportList(List<MontlyReport> montlyReportList) {
        this.montlyReportList = montlyReportList;
    }
}