Question

我有一个显示数据的Html表，并具有删除和更新功能，如下所示

function DesignBTable(data) {
    $("#ExpTableBody tr").remove();
    var rowIndex = 0;
    $.each(data, function (index, value) {
        var fromDt = moment(value.from_date).format("MMM/YYYY");
        var toDt = moment(value.to_date).format("MMM/YYYY");

        $("#ExpTableBody").append("<tr>" +
            "<td>" + value.org_name + "</td>" +
            "<td>" + fromDt + "</td>" +
            "<td>" + toDt + "</td>" +
            "<td>" + value.designation + "</td>" +
            "<td>" + value.location + "</td>" +
            "<td>" + value.is_relevant + "</td>" +
            "<td>" + '<input type="button" value = "X" class="btn btn-danger btn-sm" onClick="Javacsript:deleteRow(\'' + value.exp_id + '\',\'' + value.from_date + '\')">' + '  ' +
             '<input type="button" value = "E" class="btn btn-info btn-sm" onClick="Javacsript:editRow(\'' + value + '\')">' + "</td>" +

            "</tr>");
        //alert(moment(value.from_date).format("MM/YYYY"));
        rowIndex++;
    });
};

值对象包含各种字段。在删除按钮的Click事件中，我将value.exp_id和value.from_date作为deleteRow函数的参数发送。

我想添加编辑功能，如果我点击编辑按钮，它应该将值作为对象发送，以便我可以访问其中的所有字段。

当我尝试将值作为参数发送到JS函数时，它会错误地显示为未定义。

Answer 1

要为使用该对象的代码创建字符串，您需要创建该对象的字符串表示形式：

... onClick="editRow(' + JSON.stringify(value) + ')" ...

（注意：某些旧版浏览器不支持JSON object。）

如果直接创建元素而不是创建从中创建元素的字符串，则可以直接绑定事件并使用该对象而不创建它的字符串表示形式：

$("#ExpTableBody").append(
  $("<tr>").append([
    $("<td>").text(value.org_name),
    $("<td>").text(fromDt),
    $("<td>").text(toDt),
    $("<td>").text(value.designation),
    $("<td>").text(value.location),
    $("<td>").text(value.is_relevant),
    $("<td>").append([
      $("<input>", { type: "button", value: "X", className: "btn btn-danger btn-sm" }).click(function(){
        deleteRow(value.exp_id, value.from_date)
      }),
      $("<input>", { type: "button", value: "E", className: "btn btn-info btn-sm" }).click(function(){
        editRow(value);
      })
    ])
  ])
);

作为副作用，通过使用text方法将值放入单元格中，它会再次受到脚本注入的保护。如果您确实要将HTML代码放在单元格中，则应使用html方法。这自然意味着您应该在创建HTML代码时正确编码以防止脚本注入。

附注：javascript:伪协议仅在您将代码放入网址（即href属性）时使用。如果你在其他地方使用它，它就变成了标签。这不是有害的，但无用且令人困惑。

Answer 2

'价值'可访问性的问题是它只在函数内部定义，而不在外部。

我看到你使用JQuery，因此你可以使用JQuery.data在html对象和自定义值之间建立链接。在您的情况下，您可以将值直接添加到行尾的按钮。

如何将复杂对象作为参数发送到javascript函数

2 个答案: