如何将 javascript 对象传递给使用 onclick 等方式指定的 JavaScript 函数

How to pass an javascript object to a javascript function specified using, for example, onclick

本文关键字：方式指 onclick 函数 JavaScript javascript 对象      更新时间：2023-09-26

我一直在寻找一些时间来解决以下问题：我在javascript函数中有一个定义数据表的对象。我想将此表的一行传递给使用表单元格(td 元素(的 onclick 处理程序定义的函数，以便它可以打开一个弹出窗口，其中包含该元素的额外信息。

我找到了很多解决方案，但主要涉及从php准备然后传递给javascript的字符串。我的情况在需要上述功能的级别不涉及 php。

经过一些实验，我想出了以下内容。

将对象传递给内联 HTML 函数需要 2x 字符串化。第一个将创建 json 字符串，第二个将转义所有双引号，并在开头和结尾添加双引号。然后，接收函数只需要 JSON.parse(( 以这种方式传递的 json 字符串。

// JSON format for json_txt is:
//  { "column 1" : ["c1 data 1", "c1 data 2", ...],
//    "column 2" : ["c2 data 1", "c2 data 2", ...],
//    ...
//  }
function createTable(json_txt, el_id)
{
    var el = document.getElementById(el_id);
    var o = JSON.parse(json_txt);
    var s = '<table>';
    var num = numTableRows(o);  // just returns number of rows
    for (var r=0; r<num; r++)
    {
        s += '<tr class="tbl_data">';
        for (var col in o)
        {
            if (col === 'a special column name here')
            {
                var js = {};
                for (var c in o) js[c] = o[c][r];
                s += "<td onclick='onTrackShowInfo(this," + JSON.stringify(JSON.stringify(js))+" )'>";
            }
            else
                s += '<td>';
            s += o[col][r];
            s += '</td>';
        }
        s += '</tr>';
    }
    s += '</table>';
    el.innerHTML = s; 
}
....
function onTrackShowInfo(el, json_row)
{
    var o = JSON.parse(json_row);
    // ok, we have the row from element 'el' at this point
}

我在这里发布它的一个原因是帮助那些可能也在寻找类似东西的人，并询问是否有人看到任何问题，或者已经为这个特定问题提出了更好的解决方案。

编辑：添加了 createTable(( 函数的一个非常简化的版本，以显示更多运行此代码的上下文。

正如@charlietfl所建议的，你应该摆脱在属性中使用JavaScript的习惯，并使用事件委托来解决这个问题：

function createTable(json_txt, el_id) {
    var el = document.getElementById(el_id);
    var o = JSON.parse(json_txt);
    var s = '<table>';
    var num = numTableRows(o);  // just returns number of rows
    var tableData = [];
    for (var r=0; r < num; r++) {
        var rowData = {};
        s += '<tr class="tbl_data">';
        for (var col in o) {
            var curVal = o[col][r];
            rowData[col] = curVal;
            s += "<td data-row='" + r + "'>" + curVal + "</td>";
        }
        s += '</tr>';
        tableData.push(rowData);
    }
    s += '</table>';
    el.innerHTML = s; 
    el.addEventListener("click", function(e) {
        var targ = e.target,
            rowNum,
            data;
        if(targ && targ.nodeName == "TD") {
            rowNum = targ.getAttribute("data-row");
            data = tableData[rowNum];
            if (data) {
                onTrackShowVal(this, data);
            }
        }
    });
}

(就像不是，如果你使用的是jQuery，最后一部分可以像这样完成，如果需要，可以更改"td"字符串以提供更具体的选择器(：

$(el).on("click", "td", function () {
    var rowNum = $(this).data("row"),
        data = tableData[rowNum];
    if (data) {
        onTrackShowInfo(this, data);
    }
});

看看这个编辑：

var js = {};
for (var c in o) js[c] = o[c][r];
s += "<td onclick='onTrackShowInfo(this, "+c+" )'>"; 
...
function onTrackShowInfo(el, json_row_index)
{
    var o = js[json_row_index];
    // ok, we have the row from element 'el' at this point
}
相关文章：