Показать 10 строк в одном представлении и сдвинуть строки в таблице? - PullRequest
Новая
       6

Показать 10 строк в одном представлении и сдвинуть строки в таблице?

0 голосов
/ 13 апреля 2020

Образец размещен ниже 

<table>
  <thead>
    <th>Competition</th>
    <th>Adam</th>
  </thead>
  <tbody id='tableslide'>
  <tr>
    <td>Swimming</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Running</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>4</td>
  </tr>
  <tr>
    <td>sample</td>
    <td>5</td>
  </tr>
  <tr>
    <td>test</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>8</td>
  </tr>
  <tr>
    <td>goto</td>
    <td>9</td>
  </tr>
  <tr>
    <td>mean</td>
    <td>10</td>
  </tr>
  <tr>
    <td>acomon</td>
    <td>11</td>
  </tr>
  <tr>
    <td>server</td>
    <td>12</td>
  </tr>

   <tr>
    <td>Shooting</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>14</td>
  </tr>
  <tr>
    <td>sample</td>
    <td>15</td>
  </tr>
  <tr>
    <td>test</td>
    <td>16</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>17</td>
  </tr>
  <tr>
    <td>Shooting</td>
    <td>18</td>
  </tr>
  <tr>
    <td>goto</td>
    <td>19</td>
  </tr>
  <tr>
    <td>goto</td>
    <td>20</td>
  </tr>
  <tr>
    <td>goto</td>
    <td>21</td>
  </tr>
   <tr>
    <td>goto</td>
    <td>22</td>
  </tr>
   <tr>
    <td>goto</td>
    <td>23</td>
  </tr>
  </tbody>
</table>

I * sh, чтобы создать слайд-шоу, где при любом количестве строк в этой таблице HTML должно отображаться 10 строк за раз , Затем, скажем, 5 секунд, следующие 10 и следующие 10, вот так. Это должно цикл также. Может ли кто-нибудь помочь

Следующие jQuery Слайды, но они перемещаются по одной строке. 

$.fn.infiniteScrollUp=function(){
        var self=this,kids=self.children()
        kids.slice(10).hide()
        setInterval(function(){
            kids.filter(':hidden').eq(0).fadeIn()
            kids.eq(0).fadeOut(function(){
                $(this).appendTo(self)
                kids=self.children()
            })
        },5000)
        return this
    }
    $(function(){
        $('tbody').infiniteScrollUp()
    })

И ниже показаны первые 10 записей, но затем все оставшиеся в одном кадре. Я хочу нарезать общее количество строк на 10 и показывать их на каждом слайде. 

$(function () {
    var selectors = [
        ":lt(10)",
        ":gt(9)"
    ];
    var $tableslide = $("#tableslide").children(selectors[1]).hide().end();
    var state = false;
    setInterval(function () {
        var s = state;
        $tableslide.children(selectors[+s]).fadeOut().promise().then(function () {
            $tableslide.children(selectors[+!s]).fadeIn();
        });
        state = !state;
    }, 3000);
});
...