如何使 table 行连续淡入淡出 in/fade

Question

我有一个包含 6 行（或数据）的 table，我想先加载显示 2 行数据然后淡出并再次显示下一行 2 行并再次淡出然后再次显示下一行 2 行连续每 (n) 秒

这里是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>

我试过这个 fiddle http://jsfiddle.net/gtd4f5ny/28/ 但它只滑动了 2 次，我想每 (n) 秒每 2 行滑动 3 次。请大家帮忙。谢谢

Answer 1

您必须使用 Javascript 来执行此操作并将数据移动到 Javascript。最简单的方法是创建 DOM 个节点并在时间间隔后将其添加到 tbody。

将所有数据移动到 JavaScript 变量。
创建函数向正文添加一行
在 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

Answer 2

看看这个：

$(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 at a time" 是动态的：

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

如何使 table 行连续淡入淡出 in/fade

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

html

javascript

jquery

html-table

slide