как сделать так, чтобы строки таблицы скользили постепенно

Question

У меня есть таблица с 6 строками (или данными), я хочу, чтобы сначала загрузка показала данные из 2 строк, затем исчезла и снова показала следующие строки 2 строки и снова исчезла, затем снова показывала следующие строки 2 строки снова непрерывно каждые (n) секунды

вот код таблицы

<table border>
<thead>
    <tr>
        <th>naslov1</th>
        <th>naslov2</th>
        <th>naslov3</th>
    </tr>
</thead>
<tbody id="tableslide">
    <tr>
        <td>test_@0</td>
        <td>test_@0</td>
        <td>test_@0</td>
    </tr>
    <tr>
        <td>test_@1</td>
        <td>test_@1</td>
        <td>test_@1</td>
    </tr>
    <tr>
        <td>test_@2</td>
        <td>test_@2</td>
        <td>test_@2</td>
    </tr>
    <tr>
        <td>test_@3</td>
        <td>test_@3</td>
        <td>test_@3</td>
    </tr>
    <tr>
        <td>test_@4</td>
        <td>test_@4</td>
        <td>test_@4</td>
    </tr>
    <tr>
        <td>test_@5</td>
        <td>test_@5</td>
        <td>test_@5</td>
    </tr></tbody>

Я пытался на этой скрипке http://jsfiddle.net/gtd4f5ny/28/, но она просто скользит 2 раза, и я хочу сделать это3 раза каждые 2 строки каждые (n) секунд.Пожалуйста, помогите, ребята.Спасибо

Answer 1

Проверьте это:

$(function () {
	var $tableslide = $("#tableslide");
  var rows = $("#tableslide").children().length;
  var iterCount = 0;
  var lastPairSel = null;
  $("#tableslide").children().hide();

	setInterval(function () {
  	var start = iterCount*2 % rows;
    var next = (iterCount*2 + 1) % rows;
    var startSel = 'tr:nth-child(' + (start+1) + ')';
    var nextSel = 'tr:nth-child(' + (next+1) + ')';
    var pairSel = startSel + ',' + nextSel;
    console.log(pairSel);
    

$tableslide.children( lastPairSel ).fadeOut().promise().then(function () {
			$tableslide.children( pairSel ).fadeIn();
          lastPairSel = pairSel;

		});
  	
    iterCount++;
    
    
	}, 3000);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
    <thead>
        <tr>
            <th>naslov1</th>
            <th>naslov2</th>
            <th>naslov3</th>
        </tr>
    </thead>
    <tbody id="tableslide">
        <tr>
            <td>test_@0</td>
            <td>test_@0</td>
            <td>test_@0</td>
        </tr>
        <tr>
            <td>test_@1</td>
            <td>test_@1</td>
            <td>test_@1</td>
        </tr>
        <tr>
            <td>test_@2</td>
            <td>test_@2</td>
            <td>test_@2</td>
        </tr>
        <tr>
            <td>test_@3</td>
            <td>test_@3</td>
            <td>test_@3</td>
        </tr>
        <tr>
            <td>test_@4</td>
            <td>test_@4</td>
            <td>test_@4</td>
        </tr>
        <tr>
            <td>test_@5</td>
            <td>test_@5</td>
            <td>test_@5</td>
        </tr>
        <tr>
            <td>test_@6</td>
            <td>test_@6</td>
            <td>test_@6</td>
        </tr>
        </tbody>
</table>

Редактировать:

Изменение этого исправляет проблему [0,6]:

var start = iterCount*2 % rows;
var next = start+1; //If next is unavailable index, it will be ignored

Если "n за раз" является динамическим:

    $(function () {
        var $tableslide = $("#tableslide");
        var rows = $("#tableslide").children().length;
        var start = 0;
        var lastPairSel = null;
        $("#tableslide").children().hide();

        setInterval(function () {
            var n = 4;
            var pairSel = '';
            for(var i=0; i<n; i++){
                if(start+i > rows) break; //Optional. To skip unwanted selectors
                if(i>0) pairSel+=',';
                pairSel += 'tr:nth-child(' + (start+i+1) + ')'
            }
            console.log(pairSel);

            $tableslide.children( lastPairSel ).fadeOut().promise().then(function () {
                $tableslide.children( pairSel ).fadeIn();
                lastPairSel = pairSel;
            });

            start = (start + n);
            if(start>rows) start = 0;
        }, 3000);  
    });

Answer 2

Вы должны использовать Javascript, чтобы сделать это и переместить данные в Javascript.Самый простой способ - создать DOM-узлы и добавить его в tbody через временной интервал.

1. Переместить все данные в переменную JavaScript.
2. Создать функцию, добавить одну строку в тело
3. Добавление строк в setInterval

const data = [
  ["testa1", "testa2", "testa3"],
  ["testb1", "testb2", "testb3"],
  ["testc1", "testc2", "testc3"],
  ["testd1", "testd2", "testd3"],
  ["teste1", "teste2", "teste3"],
  ["testf1", "testf2", "testf3"]
];

function addRow(tbody, data) {
  const row = document.createElement("tr");
  for (var i = 0; i < data.length; i++) {
    const td = document.createElement("td");
    td.textContent = data[i];
    row.appendChild(td);
  }
  tbody.appendChild(row);
}
function cleartData(elem){
  while (elem.firstChild) {
    elem.removeChild(elem.firstChild);
}
}
const tbody = document.querySelector("#tableslide");
let counter = 0;
setInterval(() => {
  cleartData(tbody);
  addRow(tbody, data[counter]);
  addRow(tbody, data[counter + 1]);
  counter = (counter + 2) % data.length;
}, 2000);

<table border >
<thead>
    <tr>
        <th>naslov1</th>
        <th>naslov2</th>
        <th>naslov3</th>
    </tr>
</thead>
<tbody id="tableslide">
   </tbody>
</table>

Вот код для справки

https://codepen.io/akmittal/pen/bQjQgP