テーブルの行を移動して左にスライドすることはできますか？

Question

私はシンプルなHTMLテーブルを持っており、ページングアクションをアニメーション化して移動したいと思います。たとえば、各ページには、現在の画面上の表の行を置き換える3つの表の行がロードされます。最初の3行が左にスライドし、次の3行が右からスライドするようにアニメーションしたいと思います。

私はHTMLテーブルタグを使用して解決策を考え出すことはできませんが、可能であれば、スタイル付きリストやdivを避けたいと思います。

アクティブクラスは、最初のページに表示する必要があります。次のボタンをクリックすると、最初の3行は左にスライドし、2番目の3つは右からスライドします。 https://jsfiddle.net/ba0aLker/

<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

ここで私は汚いと迅速な近似を持っています。あなたは少しそれを微調整する必要がありますが、私はそれが良い出発点だと思う。

まず、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>