테이블 행을 접는 방법 (IE8 지원 포함)?

Question

사용자가 "더 많은 행을 보려면 여기를 클릭하십시오."와 같은 것을 클릭하면 테이블의 마지막 두 줄을 접고 접기를 원합니다. 이는 처음 두 행의 마지막 행으로 표시되고 사용자가 다시 접으려면 일부 토글 버튼으로 바뀝니다.

CSS2를 통해서만 there's no way to do this을 이해 한 후, IE8 지원을 원한다면 javascript/jquery를 사용해야 할 것입니다.

jquery 아코디언 예제를 발견하여 테이블에서 구현하려고했지만 실제로 작동하지 않았습니다. (거의 단지 웹 사이트에 대한이를 패치하려고, JQuery와 지식을 가지고)

Here's a fiddle

는 <div class="open"> '와 함께 마지막 두 행을 마무리 시도했지만 작동하지 않았다.

IE7에서는 불가능할 경우 모든 행이 처음부터 collapased되도록합니다.

HTML :

<table border="1"> 
    <col style="width:120px;" /> 
    <col style="width:120px;" /> 
    <col style="width:120px;" /> 
    <col style="width:120px;" /> 
    <col style="width:120px;" /> 
    <thead> 
     <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
     <th>5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="open"> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
     <td>d</td> 
     <td>e</td> 
     </tr> 
     <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
     <td>d</td> 
     <td>e</td> 
     </tr> 
     <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
     <td>d</td> 
     <td>e</td> 
     </tr> 
    </tbody> 
    </table> 

자바 스크립트 :

$(document).ready(function() { 
    $('table').accordion({collapsible: true,active: false,header: '.open' }); 
}); 

Answer 1

http://jsfiddle.net/4rkkksmd/4/

자바 스크립트 :

$('tr.btn td').click(function(){ 
    $('tr.hidden .slide').toggle(200) 
}); 

HTML :

<table border="1"> 
    <thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
     <th>5asdfasdfasdf</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="btn"> 
     <td colspan="5">Click me</td> 
    </tr> 
    <tr class="hidden"> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
    </tr> 
    <tr class="hidden"> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
    </tr> 
    <tr class="hidden"> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
     <td> 
      <div class="slide"> 
       asd 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
     <td>d</td> 
     <td>e</td> 
    </tr> 
    </tbody> 
</table>