how to make table rows slide fade in/fade out continuously

Question

I have a table with 6 rows (or data), I want first load show 2 rows data then fade out and showing next rows 2 rows again and fade out again then show next rows 2 rows again continuously every (n) seconds

here is the code of table

<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>

I was tried on this fiddle http://jsfiddle.net/gtd4f5ny/28/ but its just slide 2 times and I want make it 3 times every 2 rows every (n) seconds. Please help guys. Thanks

Answer 1

You have to use Javascript to do that and move the data to Javascript. Simplest way is to create DOM nodes and add it to tbody after time interval.

1. Move all data to JavaScript variable.
2. Create a function add a single row to body
3. Add rows in a 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> 

Here is the code for reference

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

Answer 2

Check this out:

 $(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> 

Edit:

Changing this fixes the [0,6] problem:

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

If "n at a time" is dynamic:

    $(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);  
    });