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

Question

I have a Html Table which displays data and is having delete and update functionality as below,

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++;
    });
};

The value object contains various fields. On the Click event of the delete button I send value.exp_id and value.from_date as parameter to deleteRow function.

I want to add Edit functionality where if I click on the edit button it should send the value as object so that I can access all the fields in it.

When I try to send value as parameter to the JS function it errors out as undefined.

Answer 1

To create a string for code that uses the object, you would need to create a string representation of the object:

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

(Note: The JSON object is not supported in some older browsers.)

If you create elements directly instead of creating a string that you create elements from, you can bind the event directly and use the object without creating a string representation of it:

$("#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);
      })
    ])
  ])
);

As a side effect, by using the text method to put the values in the cells, it's protected agains script injection. If you actually have HTML code that you want to put in a cell, you would use the html method instead. That naturally means that you should encode it properly when you create that HTML code to protect against script injection.

---

Side note: The javascript: pseudo protocol is only used when you put code in an URL, ie a href attribute. If you use it anywhere else it becomes a label instead. This is not harmful, but useless and confusing.

Answer 2

the problem of 'value' accessibility is it's defined only inside the function not outside.

I see you use JQuery, so you can use JQuery.data to make a link between an html object and a custom value. In your case you can add the value directly to the button at the end of the row.