Question

我有一个HTML表，其中有几行在最后一列中有一个编辑按钮。为了避免不必要地重新加载页面，我在表格旁放置了一个表单，它将通过AJAX将数据插入到DB中，这将返回带有对象数据的JSON字符串。我必须将这些数据附加到表中。我知道如何附加数据，但我在jquery函数的浏览器中得到一个意外的字符串错误，正好在按钮所在的行中。 onclick函数如下所示。

$("#subBtn").click(function(){
        $.post("/EmployeeSpringMVC/newRule",
                {
                    name: $("#ruleName").val(),
                    desc: $("#ruleDesc").val(),
                    startDate: $("#ruleStartDate").val(),
                    severity: $("#ruleSeverity").val()
                },
                function(data, status){
                     alert("Data: " + data + "\nStatus: " + status);
                     var rule = jQuery.parseJSON( data );
                     var edtbtn = "<button class='btn btn-primary btn-sm editBtn'" +
                            "onclick='editBtnClick(" + rule.ruleId + ", '" + rule.ruleName + "', '" + rule.ruleDesc "', '" + rule.startDate + "', '" + rule.ruleSeverity + "')'>" +
                            "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>" +
                            "Edit</button>";
                     var row = "<tr id=" + rule.ruleId + ">" +
                                    "<td class='nameF'>" + rule.ruleName + "</td>" + 
                                    "<td class='descF'>" + rule.ruleDesc + "</td>" +
                                    "<td class='dateF'>" + rule.startDate + "</td>" +
                                    "<td class='severF'>" + rule.ruleSeverity + "</td>" +
                                    "<td>" + edtbtn +
                                    "<button onclick='window.location = '/EmployeeSpringMVC/delRule/${rule.ruleId}''" +
                                    "data-method='delete' class='btn btn-danger btn-sm'>" +
                                    "<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>" +
                                     "Delete</button></td>" +
                                    "</tr>";
                     $('#records_table').append(row);

                });
    });

错误的行是

var edtbtn = "<button class='btn btn-primary btn-sm editBtn'" +
                            "onclick='editBtnClick(" + rule.ruleId + ", '" + rule.ruleName + "', '" + rule.ruleDesc "', '" + rule.startDate + "', '" + rule.ruleSeverity + "')'>" +
                            "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>" +
                            "Edit</button>";

这有什么问题，还有更好的方法吗？这个问题的不同之处在于我正在尝试添加一个按钮，该按钮具有对下面给出的函数的javascript调用。

function editBtnClick(id, name, desc, startDate, severity){
    $("#ruleForm").attr("action", "/EmployeeSpringMVC/updRule");
    $("#ruleId").val(id);
    $("#ruleName").val(name);
    $("#ruleDesc").val(desc);
    $("#ruleStartDate").val(startDate);
    $("ruleSeverity").val(severity);
    $("#ruleIdDiv").css("display", "inline");
    $("#updBtn").css("display", "inline");
    $("#subBtn").css("display", "none");
}

我觉得这比在jquery中识别按钮点击后从HTML页面中选择数据更容易。

生成将在单击时执行java脚本函数的按钮

0 个答案: