我一直在寻找以下问题的解决方案：我在javascript函数中有一个定义数据表的对象。我想将此表的行传递给使用表单元格（td元素）的onclick处理程序定义的函数，以便它可以打开带有该元素额外信息的弹出窗口。
我找到了很多解决方案，但主要涉及从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
}
我将其发布在这里的一个原因是，帮助可能也在寻找类似内容的其他人，并询问是否有人对此有任何疑问，或者已针对此特定问题提出了更好的解决方案。
编辑：添加了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);
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句