예를 들어 onclick을 사용하여 지정된 javascript 함수에 javascript 객체를 전달하는 방법

Question

다음 문제에 대한 해결책을 찾고있었습니다. 데이터 테이블을 정의하는 자바 스크립트 함수에 객체가 있습니다. 이 테이블의 행을 테이블 셀의 onclick 핸들러 (td 요소)를 사용하여 정의 된 함수에 전달하여 해당 요소에 대한 추가 정보가있는 팝업을 열 수 있도록하려고합니다.

나는 이것에 대한 몇 가지 해결책을 찾았지만 주로 PHP에서 준비된 문자열을 포함하고 자바 스크립트에 전달되었습니다. 내 경우에는 위의 기능이 필요한 수준의 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 
} 

한 가지 이유는, 사람이 어떤 문제를 보는 경우도 물어 유사한, 뭔가를 찾고있을 수 있습니다 다른 사람들을 돕기 위해, 또는 이것에 더 나은 솔루션에 도달했습니다 특정 문제.

EDIT :이 코드가 실행되는 컨텍스트를 조금 더 보여주기 위해 매우 단순화 된 createTable() 함수 버전이 추가되었습니다. 이 편집에서

Answer 1

, 당신은 당신의 속성에서 자바 스크립트를 사용하는 습관을 벗어나,이 문제에 대한 이벤트 위임을 사용한다 :

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

봐 : @charlietfl에서 알 수 있듯이

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 
}