2

我想连续循环浏览表格的行，突出显示一行，然后暂停并移动到下一行。当我到达终点时，我想回到原点重新开始。

我最喜欢 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>
4

3 回答 3

4

您可以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);​

如果您只打算一次使用一个活动元素，请使用 aid而不是class.

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

于 2013-01-01T16:32:16.477 回答
1

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);
于 2013-01-01T16:42:15.570 回答
1

创建 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);

现场演示

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

于 2013-01-01T16:45:36.770 回答