5

내 웹 앱에서 테이블을 그리기위한 jQuery 용 DataTables 플러그인을 사용하고 있습니다. 모든 것이 올바르게 작동합니다. 그러나 옵션 중 하나는 세부 정보 버튼을 눌러 추가 값을 갖는 정보 창을 여는 것입니다. 이제 그 부분은 올바르게 작동하지만 내 테이블은 클래스로 정의되므로 사용자가 메뉴를 사용하여 언어를 변경할 때 동적으로 언어를 변경할 수 있습니다.테이블이 이미 그려져있는 경우 값을 변경하는 방법

처음에 내가 선언 한대로 내가 얻는 유일한 것은 영어입니다.

내 미리 정의 된 테이블 :

function fnFormatDetails (nTr) 
{ 
    var aData = oTable.fnGetData(nTr); 
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="background-color:whitesmoke; padding-left:10%; padding-right:10%; width:100%">'; 
    sOut += '<tr><td style="text-align:left"><span class="id_prog">ID Program : '+aData[0]+'</span></td><td style="text-align:left"><span class="id_in_perc">Increment : '+aData[3]+'</span></td></tr>'; 
    sOut += '<tr><td style="text-align:left"><span class="id_var">Machine position : '+aData[1]+'</span></td><td style="text-align:left"><span class="id_tot_in_var">Total inc : '+aData[4]+'</span></td></tr>'; 
    sOut += '<tr><td style="text-align:left"><span class="id_dti_var">DTI : '+aData[2]+'</span></td></tr>'; 
    sOut += '</table>'; 

    return sOut; 
} 

나는 언어를 변경 내 자바 스크립트는 아무 일도 발생하지 않습니다, 클래스 이름을 통해 각각의 값을 변경하지만, 내 코드의 나머지 부분이 잘 그러나이 미리 정의 된 테이블에 대해 작동 할 때 하지 않습니다. 어떤 생각?

$('#jphit tbody td img').live('click', function() { 
     var nTr = $(this).parents('tr')[0]; 
     if (oTable.fnIsOpen(nTr)) 
     { 
      /* This row is already open - close it */ 
      this.src = "images/plus-icon.png"; 
      oTable.fnClose(nTr); 
     } 
     else 
     { 
      /* Open this row */ 
      this.src = "images/minus-icon.png"; 
      oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details'); 
     } 
}); 

버튼을 클릭 할 때 그래서 fnFormatDetails() 함수를 호출하지만 자신이 설정 한 경우에만으로 그려 :

편집

이는 이벤트 리스너입니다. 그래서 테이블의 값을 동적으로 변경하면 아무것도 변하지 않습니다.

좀 더 자세한 정보가 필요하십니까?

+2

테이블 기능이 어떻게 사용되는지 * 표시하려면 질문을 편집하십시오. * 현재 실제로 시도하고있는 것을 보여줄 것이 없습니다. –

+2

세부 정보 테이블을 표시하는 방법 : 대화 상자에서 오버레이 ... DOM에 추가되지 않은 요소 클래스를 변경하려고하기 때문에이 기능이 작동하지 않을 수 있습니다. – jmventar

+1

나는 대답을 편집했습니다 –

답변

4

정확하게 이해하면 페이지의 내용이 항상 동적으로 변경됩니다. 저는 왜 당신이 자바 스크립트에 넣을 지 모르지만 jQuery를 사용하면서 다른 접근법을 제안합니다.

이것은 html 파일에 있습니다.

고유 한 값이므로 클래스 대신 ID를 사용합니다.

그리고 html 태그의 내용을 바꿀 자바 스크립트.

function fnFormatDetails (nTr) { 
    var aData = oTable.fnGetData(nTr); 
    $("#id1").html("My data here " + aData[0]); 
    $("#id2").html("My data here " + aData[1]); 
    ... 
} 

태그의 HTML 콘텐츠를 지정한 ID로 바꾸고 속성으로 지정한 콘텐츠로 바꿉니다.

나는 당신을 돕기를 바랍니다.

+0

코드를 시험해보고 I0ll이 나를 위해 작동하는지 알려줍니다. –

1

1) console.log를 통해 fnFormatDetails의 aData를 살펴 보시기 바랍니다. 이렇게하면 함수가 실행되고 배열에 올바른 값이 표시됩니다.

2) 오래된 테이블을 nTr.html ("")로 지우고 그 점이 개선되는지보십시오.

우리가 더 잘 이해할 수 있도록 표의 이미지를 붙여 주실 수 있습니까?

관련 문제