jQuery를 사용하여 테이블 행 그룹 슬라이드하기

저는 자바 스크립트와 jQuery를 처음 사용하기 때문에 빠른 수정이 가능합니다. 여러 범주로 그룹화 할 수있는 데이터가 포함 된 표를 표시해야하며 각 카테고리의 모든 관찰을 숨기거나 드러내는 slideToggle을 구현하고 싶습니다.jQuery를 사용하여 테이블 행 그룹 슬라이드하기

아래 코드는 4 열 9 행의 표를 표시해야하며 모든 3 행의 그룹 앞에 녹색 "섹션 i"행이옵니다. 나는 각 섹션 헤더를 아래에있는 모든 행을 확장하거나 축소하는 slideToggle로 사용하려고합니다. 지금은 무너지고있는 것이 없습니다. 이견있는 사람?

<head> 
    <style type="text/css"> 
    td{padding:5px;} 
    </style> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".flip").click(function(){ 
      $(this).next(".section").slideToggle(); 
     }); 
    }); 
    </script> 

</head> 

<body> 
    <p> 
     <table id="main_table"> 
     <thead> 
      <tr class="firstline"> 
       <th>Column1</th> 
       <th>Column2</th> 
       <th>Column3</th> 
       <th>Column4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 1 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 111</td> 
       <td>item 112</td> 
       <td>item 113</td> 
       <td>item 114</td> 
      </tr> 
      <tr> 
       <td>item 121</td> 
       <td>item 122</td> 
       <td>item 123</td> 
       <td>item 124</td> 
      </tr> 
      <tr> 
       <td>item 131</td> 
       <td>item 132</td> 
       <td>item 133</td> 
       <td>item 134</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 2 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 211</td> 
       <td>item 212</td> 
       <td>item 213</td> 
       <td>item 214</td> 
      </tr> 
      <tr> 
       <td>item 221</td> 
       <td>item 222</td> 
       <td>item 223</td> 
       <td>item 224</td> 
      </tr> 
      <tr> 
       <td>item 231</td> 
       <td>item 232</td> 
       <td>item 233</td> 
       <td>item 234</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 3 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 311</td> 
       <td>item 312</td> 
       <td>item 313</td> 
       <td>item 314</td> 
      </tr> 
      <tr> 
       <td>item 321</td> 
       <td>item 322</td> 
       <td>item 323</td> 
       <td>item 324</td> 
      </tr> 
      <tr> 
       <td>item 331</td> 
       <td>item 332</td> 
       <td>item 333</td> 
       <td>item 334</td> 
      </tr> 
      </div> 
     </tbody> 
     </table> 
    </p> 
</body>

출처

2011-02-24 CCC

http://jsfiddle.net/xpZTv/ – AndreKR

첫째 : 당신은 table'와'td''사이'div'을 사용할 수 없습니다. 둘째 :'td.flip'에 요소 * next() *가 없습니다 (형제가 없습니다). – AndreKR

jQuery 및 테이블과 비슷한 작업을 수행하는 데 실제 문제가 있었지만 테이블이 실제로 잘 작동하지 않아서 테이블을 버리고 div가 더 잘 작동합니다 .-) – Rob

당신은 그런 <table>에 <div>의 혼합 대신 추가 <tbody> 요소를 사용할 수 없습니다. 콜백에서 this은 형제가없는 <td> 요소이므로 .next은 유용하지 않습니다. 관심이있는 .section과 동일한 깊이에 도달 할 때까지 다시 돌아가서 .next으로 전화하십시오. 귀하의 HTML보다 같이해야

<table id="main_table"> 
    <thead> 
     <tr class="firstline"> 
      <th>Column1</th> 
      <th>Column2</th> 
      <th>Column3</th> 
      <th>Column4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr style="background-color:green; color:white"> 
      <td colspan="4" class="flip"> Section 1 </td> 
     </tr> 
    </tbody> 
    <tbody class="section"> 
     <tr> 
      <td>item 111</td> 
      <td>item 112</td> 
      <td>item 113</td> 
      <td>item 114</td> 
     </tr> 
     <!-- ... -->

그리고 같은 당신의 클릭 핸들러는 : 그것은 당신이 부르는 <tbody>을 찾아 때까지

$('.flip').click(function() { 
    $(this) 
     .closest('tbody') 
     .next('.section') 
     .toggle('fast'); 
});

.closest 호출은 조상까지 거슬러 올라갑니다 그것에 관한 .next.

업데이트 jsfiddle : http://jsfiddle.net/ambiguous/Udxyb/4/

출처

2011-02-25 03:39:27

이봐,이 완벽하게 작동합니다. 감사! – CCC

원본 질문에서 slideToggle을 묻습니다.이 방법으로는 분명히 작동하지 않습니다. 'toggle'을'slideToggle'로 바꾸면 애니메이션이 깨집니다. http://jsfiddle.net/m83Pc/ – supertrue

@supertrue : 꽤 오래 전에'slideToggle'과'toggle' 스위치가 어디에서 왔는지 모르겠습니다. 나는 애니메이션 문제가 '

'내부의 일반적인 디스플레이 및 중첩 문제의 부작용이라고 생각합니다. 나는 조금 주위에 찌를 것이고, 내가 생각할 수있는 것을 볼 것이다. –

jQuery를 사용하여 테이블 행 그룹 슬라이드하기

답변

관련 문제