jQuery로 테이블 행 사이에 세부 정보 표시

Question

일부 헤더 정보를 표시하는 테이블이 있습니다. 나는 테이블의 맨 오른쪽에있는 링크를 클릭하면 현재 행 아래에 세부 정보를 표시하고 싶습니다. 이 효과를 얻으려면 어떻게해야합니까?

 
function showRdmDtl(flxkey, data) { 
    var flxkey; 
    var anchorId='a_'+flxkey 
    lResponse = JSON.parse(data); 
    $.each(lResponse.rdmDetails, function(intIndex, objValue) { 
     $(anchorId).closest('tr').after('').next().append(''+objValue.date+''+objValue.amount+'').show() 
    }); 
} 

어떤 생각이 왜 작동하지 않을 -

--Edit--
아래 아이디어를 사용하여, 나는 (작동하지 않았다) 다음 코드를 시도?

Answer 1

다른 가능성이 있다고 생각합니다. 예를 들어, 테이블의 모든 행 아래에 세부 정보를 포함하고 처음에는 숨겨지는 다른 행을 추가 할 수 있습니다. 사용자가 링크를 클릭하면 당신은 그것을 보여줄 수 :

<tr> 
    <td><a href="#">Details</a></td> 
</tr> 
<tr style="display:none;"> 
    <td>Some details about previous row</td> 
</tr> 
... 

$('table a').click(function() { 
    $(this) 
     .closest('tr') 
     .next() 
     .show(); 
}); 

또 다른 가능성은 행에 대한 자세한 정보를로드하고 테이블에 추가 할 AJAX를 사용하는 것입니다 :

<tr> 
    <td><a href="#">Details</a></td> 
</tr> 
... 

$('table a').click(function() { 
    $(this) 
     .closest('tr') 
     .after('<tr></tr>') 
     .next() 
     .load('http://www.example.com/details'); 
});