테이블 행을 왼쪽으로 움직이거나 슬라이드 할 수 있습니까?

Question

간단한 HTML 표가 있고 페이징 동작을 움직이기를 원합니다. 예를 들어, 각 페이지는 현재 화면상의 테이블 행을 대체 할 3 개의 테이블 행을로드합니다. 첫 번째 3 개의 행이 왼쪽으로 미끄러 져 나오게하고 다음 3 개의 행은 오른쪽에서 미끄러지 듯 움직이게하고 싶습니다.

HTML 테이블 태그를 사용하는 솔루션을 생각해 낼 수 없지만 가능한 경우 스타일 목록이나 div를 피하고 싶습니다.

활성 클래스는 첫 번째 페이지에 표시되어야합니다. 다음 버튼을 클릭하면 처음 세 행은 왼쪽으로 슬라이드되고 두 번째 행은 오른쪽에서 슬라이드해야합니다.

<table> 
    <tr class="active"> 
    <td>one</td> 
    </tr> 
    <tr class="active"> 
    <td>two</td> 
    </tr> 
    <tr class="active"> 
    <td>three</td> 
    </tr> 
    <tr> 
    <td>four</td> 
    </tr> 
    <tr> 
    <td>five</td> 
    </tr> 
    <tr> 
    <td>six</td> 
    </tr> 
</table> 
<button id="prev">Previous</button> 
<button id="next">Next</button> 

Answer 1

https://jsfiddle.net/ba0aLker/ 여기에 나는 더러운 빠른 aproximation 있습니다. 약간 조정해야하지만 좋은 출발점이라고 생각합니다.

먼저 HTML에 테이블이 있고 active 클래스가 있어야합니다. 이것은 보이는 것입니다. 다른 테이블에 대해서는 숨길 수 있도록 display:none을 설정하십시오.

그러면 JS에서 클래스 active을 다음 요소로 바꿉니다. 다음 요소가 테이블인지 확인하기 위해 if을 추가했습니다. 그렇지 않으면 첫 번째 테이블이 active 클래스를 얻습니다.

$("document").ready(function() { 
 

 
    $("#the_button").click(function() { 
 
var next = $(".tables.active").last().next(); 
 

 
if (next.get(0).tagName != 'TABLE') { 
 
    next = $(".tables").eq(0) 
 
} 
 

 
$(".tables.active").removeClass("active"); 
 
next.addClass("active"); 
 
next.next().addClass("active"); 
 
next.next().next().addClass("active"); 
 

 

 
$(".tables").fadeOut(300); 
 
$(".tables.active").delay(300).fadeIn(300); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tables active"> 
 
    <tr> 
 
<th>Firstname</th> 
 
<th>Lastname</th> 
 
<th>Age</th> 
 
    </tr> 
 
    <tr> 
 
<td>Jill</td> 
 
<td>Smith</td> 
 
<td>50</td> 
 
    </tr> 
 
    <tr> 
 
<td>Eve</td> 
 
<td>Jackson</td> 
 
<td>94</td> 
 
    </tr> 
 
</table> 
 
<table class="tables active"> 
 
    <tr> 
 
<th>Firstname</th> 
 
<th>Lastname</th> 
 
<th>Age</th> 
 
    </tr> 
 
    <tr> 
 
<td>Jill</td> 
 
<td>Smith</td> 
 
<td>50</td> 
 
    </tr> 
 
    <tr> 
 
<td>Eve</td> 
 
<td>Jackson</td> 
 
<td>94</td> 
 
    </tr> 
 
</table> 
 
<table class="tables active"> 
 
    <tr> 
 
<th>Firstname</th> 
 
<th>Lastname</th> 
 
<th>Age</th> 
 
    </tr> 
 
    <tr> 
 
<td>Jill</td> 
 
<td>Smith</td> 
 
<td>50</td> 
 
    </tr> 
 
    <tr> 
 
<td>Eve</td> 
 
<td>Jackson</td> 
 
<td>94</td> 
 
    </tr> 
 
</table> 
 

 
<table class="tables" style="display:none"> 
 
    <tr> 
 
<th>Foo</th> 
 
<th>BAR</th> 
 
<th>FooBar</th> 
 
    </tr> 
 
    <tr> 
 
<td>foo</td> 
 
<td>bar</td> 
 
<td>foobar</td> 
 
    </tr> 
 
    <tr> 
 
<td>var</td> 
 
<td>foo</td> 
 
<td>foovar</td> 
 
    </tr> 
 
</table> 
 
<table class="tables" style="display:none"> 
 
    <tr> 
 
<th>Foo</th> 
 
<th>BAR</th> 
 
<th>FooBar</th> 
 
    </tr> 
 
    <tr> 
 
<td>foo</td> 
 
<td>bar</td> 
 
<td>foobar</td> 
 
    </tr> 
 
    <tr> 
 
<td>var</td> 
 
<td>foo</td> 
 
<td>foovar</td> 
 
    </tr> 
 
</table> 
 
<table class="tables" style="display:none"> 
 
    <tr> 
 
<th>Foo</th> 
 
<th>BAR</th> 
 
<th>FooBar</th> 
 
    </tr> 
 
    <tr> 
 
<td>foo</td> 
 
<td>bar</td> 
 
<td>foobar</td> 
 
    </tr> 
 
    <tr> 
 
<td>var</td> 
 
<td>foo</td> 
 
<td>foovar</td> 
 
    </tr> 
 
</table> 
 
<button id="the_button"> 
 
    next table 
 
</button>