javascript - 如何将复杂对象作为参数发送给 JavaScript 函数

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。)

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

$("#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 方法将值放入单元格中，可以防止脚本注入(inject)。如果您确实想要将 HTML 代码放入单元格中，则可以使用 html 方法。这自然意味着您在创建 HTML 代码时应该对其进行正确编码以防止脚本注入(inject)。

<小时/>

附注:javascript: 伪协议(protocol)仅在将代码放入 URL(即 href 属性)时使用。如果你在其他地方使用它，它就会变成一个标签。这没有害处，但无用且令人困惑。