Question

我希望不断循环遍历表格的行，突出显示一行，然后暂停并移动到下一行。当我到达终点时，我想回头再次从头开始。

我最喜欢roXon的答案，因为它感觉更简洁和实用，所以我将它扩展为使用三个表。但现在有代码重复 - 编写没有重复的代码的最优雅的方法是什么，它允许不同的表和颜色？这是工作三表解决方案（同样，内部函数是否严格必要？）：

<!doctype html>
<html>
<head>
<style>
.highlight1 { background:gold; }
.highlight2 { background:lightblue; }
.highlight3 { background:lightgreen; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $(function() {
    var $TR1=$('#table1 tr:gt(0)'), TRn1=$TR1.length, c1=0;
    var $TR2=$('#table2 tr:gt(0)'), TRn2=$TR2.length, c2=0;
    var $TR3=$('#table3 tr:gt(0)'), TRn3=$TR3.length, c3=0;
    function loop(){
      $TR1.eq(c1++%TRn1).addClass('highlight1').siblings().removeClass('highlight1');
      $TR2.eq(c2++%TRn2).addClass('highlight2').siblings().removeClass('highlight2');
      $TR3.eq(c3++%TRn3).addClass('highlight3').siblings().removeClass('highlight3');
    }
    setInterval(loop, 1000);
  });
});
</script>
</head>
<body>
<table id="table1" border="1">
  <th>Table One</th>
  <tr><td>Table Row 1</td></tr>
  <tr><td>Table Row 2</td></tr>
  <tr><td>Table Row 3</td></tr>
  <tr><td>Table Row 4</td></tr>
  <tr><td>Table Row 5</td></tr>
  <tr><td>Table Row 6</td></tr>
</table>
<table id="table2" border="1">
  <th>Table Two</th>
  <tr><td>Table Row 1</td></tr>
  <tr><td>Table Row 2</td></tr>
  <tr><td>Table Row 3</td></tr>
  <tr><td>Table Row 4</td></tr>
  <tr><td>Table Row 5</td></tr>
  <tr><td>Table Row 6</td></tr>
</table>
<table id="table3" border="1">
  <th>Table Three</th>
  <tr><td>Table Row 1</td></tr>
  <tr><td>Table Row 2</td></tr>
  <tr><td>Table Row 3</td></tr>
  <tr><td>Table Row 4</td></tr>
  <tr><td>Table Row 5</td></tr>
  <tr><td>Table Row 6</td></tr>
</table>
</body>
</html>

Answer 1

您可以使用setInterval()：

var $rows = $('table tr td');
var index = 0;

setInterval(function() {
    $('.highlighted').removeClass('highlighted');
    $rows.eq(index).addClass('highlighted');

    index = (index + 1) % $rows.length;
}, 100);

如果您只计划一次拥有一个有效元素，请使用id代替class。

演示：http://jsfiddle.net/JCSL3/3/

Answer 2

jQuery delay（）方法适用于动画。请尝试使用setInterval计时器。

var rows =  $('tr:gt(0)'),
   rowIndex = 0,
   interval;

interval = setInterval(function() {
    rows.removeClass('highlight');
    $(rows[rowIndex]).addClass('highlight');
    rowIndex++;
    if (rowIndex > rows.length) {
        rowIndex = 0;            
    }
},1500);

Answer 3

创建一个CSS类.highlight
使用选择器时更具体。我添加了一个表ID

var $TR = $('#highlight_table tr:gt(0)'),
    TRn = $TR.length,
      c = 0 ;

function loop(){
   $TR.eq( c++ % TRn ).addClass('highlight').siblings().removeClass('highlight');
}

setInterval(loop, 1000);

<强> LIVE DEMO

c++%TRn将在每次循环迭代时递增我们的计数器，但是由于Modulo运算符 - 一旦计数器和TR元素的数量匹配 - 我们的计数器将重置为0 （例如4%4=0）

通过表元素连续暂停循环

3 个答案: