Question

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

我找到了很多解决方案，但主要涉及从php编写的字符串然后传递给javascript。我的案例涉及在需要上述功能的级别没有php。

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

将对象传递给内联HTML函数需要2x stringify。第一个将创建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
}

我在这里发布它的一个原因是帮助那些也可能正在寻找类似内容的人，并询问是否有人发现任何问题，或者为这个特定问题提出了更好的解决方案。< / p>

编辑：添加了一个非常简化的createTable（）函数版本，以显示运行此代码的更多内容。

Answer 1

正如@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);
    }
});

Answer 2

看看这个编辑：

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
}

如何将javascript对象传递给使用（例如）onclick指定的javascript函数

2 个答案: