Question

我有一个简单的HTML表格，我想移动分页动作的动画。例如，每个页面加载3个表行，这些表应该替换当前的屏幕表行。我想设置动画，以便前三行滑向左侧，接下来的三行从右侧滑入。

我似乎无法使用HTML表格标记提出解决方案，但我想尽可能避免使用样式列表或div。

以下是一个示例，有效类应该在第一页上可见，当您单击下一个按钮时，前三行应该向左滑动，第二行应该滑动在右边。 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>

是否可以向左移动和滑动表格行？

1 个答案: