테이블에서 jQuery 쇼/숨기기 토글 사용

StackOverflow https://stackoverflow.com/questions/1213032

  •  06-07-2019
  •  | 
  •  

문제

Andy Langton의 쇼/Hide/Mini-Accordion을 조정하려고합니다.http://andylangton.co.uk/jquery-how-hide) 테이블 내에서 작동합니다. 각 이벤트에 확인 양식이있는 이벤트 목록을 만들고 싶습니다. 마지막 셀이나 행에서 '확인'버튼을 클릭하면이 특정 이벤트와 관련된 양식이 공개되기를 원합니다.

Andy의 코드가 사용됩니다

$('.toggle')
    .prev()
    .append('<a href="#" class="toggleLink">'+showText+'</a>');

숨겨진 양식 직전에 토글 링크 (확인 버튼)를 동적으로 추가하십시오. 그러나 이것은 셀이 아닌 테이블 행 안에 링크를 추가합니다. 따라서 나는 그것을 변경했습니다 

$('.toggle')
    .prev()
    .append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');

링크는 이제 올바른 위치에 있지만 이제 양식의 쇼/숨기기를 호출하지 않습니다. 그것이 잘못 배치되었을 때, 옳지 않더라도 기능이 작동했습니다. 토글 액션을 호출하는 선택기가 정확하지 않다고 생각하지만 수정 방법을 모르겠습니다. 현재입니다 

$(this)
    .parent()
    .next('.toggle')
    .toggle('slow');

이것은 본질적으로 소스의 모습입니다 ...

<table id="training-events">
<tr>
   <th>Date / Time</th>
   <th>Event / Venue</th>
   <th>Cost</th>
   <th>Confirm</th>
</tr>
<tr class="event" valign="top">
    <td class="date">Mon, 10 August 2009<br>03:30 PM - 05:30 PM</td>
    <td><h5>Regional Director Meeting</td>
    <td>No Charge</td>
    <td><a href="#" class="toggleLink">Cancel</a></td>
</tr>
<tr style="display: none;" class="toggle">
   <td colspan="4">
      ** FORM **
   </td>
</tr>
</table>
도움이 되었습니까?

해결책

당신은 다음과 같은 것이 필요합니다.

$(this).parent().parent().next('.toggle').toggle('slow')

또는

$(this).closest('tr').next('.toggle').toggle('slow');

당신은 단일 상위 () 호출만으로 당신을 TD로 데려 오는 것만으로도 TR로 올라 가야합니다.

다른 팁

스타일 = "디스플레이 : 없음;"을 제거하면 이것은 나에게 효과적입니다. 토글 tr에서.

그가하고있는 예에서 다음을 알 수 있습니다.

 $('.toggle').hide();

이것이 토글 분류 요소를 숨기는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top