방법 테이블의 루프 동적 행을 JQuery와

Question

에게

존경하는 선생님/부인을 사용하는 사실

내 응용 프로그램 데이터 그래서 스피 보여주는 많이 포함 JSP로 동적으로 foreach 루프를 사용하여 대시 보드에 데이터를 배치하는 것입니다

한 행만 남았고 나머지 행을 숨기고 각 행에 대해 버튼을 배치하면 버튼을 클릭하면 해당 행에 대한 숨겨진 행이 표시되지만 모든 행이 표시되므로이 행을 느리게하는 방법을 알려주세요. 미리 감사드립니다.

function show(btn) 
{ 
    var btn=$(btn); 
    var tbl=btn.parents('table'); 
    var row=btn.parents('tbody'); 
    var next=row.next(); 

    $('tbody.hiddenDiv',tbl).hide(); 
    next.slideDown('fast'); 

} 

테스트 바이올린 :

onclick="show(this)" 

그래서 당신이 필요로하는 개체를 통과하고 쉽게 찾을 수 :

<c:forEach items="${fvaData}" var="fva"> 
<tr> 
<td > 
<input size="30" value="<c:out value="${fva.conIdNumber}"/>"/> 

</td> 

<td > 
<input size="30" value="<c:out value="${fva.flightDate}"/>"/> 
</td> 


<td > 
<input size="30" value="<c:out value="${fva.consigneeCityAirportName}"/>"/> 
</td> 

<td > 

<td align="center" > 
<input type="button" id="Button" value="Populate" name="FTR" onclick="show()";/></td> 

</tr> 
<tbody class="hiddenDiv"> 
<tr><td>Consignment Number</td><td><input size="40" value="<c:out value="${fva.conIdNumber}"/>"/></td> 
<td>Airway Bill</td><td><input size="40" value="<c:out value="${fva.airWayBill}"/>"/></td> 
</tr> 
<tr> 
<td>Flight Number</td><td> <input size="40" value="<c:out value="${fva.fightNumber}"/>"/></td> 
<td>Carrier Code</td><td><input size="40" value="<c:out value="${fva.answerCarrierCode}"/>"/></td> 
</tr> 




</table> 
</c:forEach> 


and my script is as follows 
function show() 
{ 

     $(".hiddenDiv").each(function (i) { 
     if ($(this).is(":hidden")) { 
      $(this).slideDown("fast"); 
     } else { 
      $(this).hide(); 
     } 
     }); 



} 

Answer 1

함수에 인수로 버튼을 제공 http://www.jsfiddle.net/doktormolle/nSaWn/