Question

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

这是表格的代码

<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次，所以我想每（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”是动态的：

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

如何使表格行幻灯片连续淡入/淡出

2 个答案: