如何將javascript對象傳遞給使用例如onclick

Question

指定的javascript函數我在尋找解決以下問題的一些時間：我在JavaScript函數中定義了一個對象，該對象定義了一個數據表。我想將此表的一行傳遞給使用表格單元格（td元素）的onclick處理程序定義的函數，以便可以打開具有該元素額外信息的彈出窗口。

我發現了相當多的解決方案，但主要涉及從PHP準備的字符串，然後傳遞給JavaScript。我的情況不涉及需要上述功能的級別。

經過一番實驗，我想出了以下內容。

將對象傳遞給內聯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（）函數來顯示更多的代碼運行的上下文。

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 
}