Question

我有一个由十行组成的HTML表。从这十行我需要一次只显示5行。在给定的时间段之后，顶行应该消失，并且应该在底部添加新行（第6行）。在乞讨时，表格应包括1-2-3-4-5行和2-3-4-5-6过渡后。该过程应在相同的时间后重复，导致3-4-5-6-7表。循环完所有行后，该过程应从1-2-3-4-5表开始。所有这一切都应该发生一个很好的过渡效果。

你能帮助我吗？

Answer 1

使用jquery中的setinterval函数重复操作。

最初使用css显示前5个表行

table tr {
  display: none;
}
table tr:nth-child(-n+5){
    display:block;
}

$(function(){
    var i = 0;
    setInterval(function () {
       var sel = 'table tbody tr:nth-child(' + i + ')';
       $(sel).css("display", "none");
       var last = i + 5;
       if(last > 10) last = last % 10;
       var sel1 = 'table tbody tr:nth-child(' + last+ ')';
       $(sel1).css("display", "block");
       i++;
       if(i == 11)
         i = 1;
    },2000);
})

table tr {
  display: none;
}
table tr:nth-child(-n+5){
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        
      </tr>
    </thead>
    <tbody class="table-body">
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr><tr>
        <td>7</td>
      </tr><tr>
        <td>8</td>
      </tr><tr>
        <td>9</td>
      </tr><tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  </div>

jQuery向上滑动并在底部添加另一个

1 个答案: