2

テーブルの行を連続的に循環させ、行を強調表示してから、一時停止して次の行に移動したいと考えています。最後まで来たらまた戻って最初からやり直したい。

より簡潔で機能的だと感じた roXon の回答が一番気に入ったので、3 つのテーブルで動作するように拡張しました。しかし、コードの重複があります。異なるテーブルや色を使用できるように、重複することなくコードを記述する最もエレガントな方法は何ですか? これが実際の 3 つのテーブルのソリューションです (また、内部関数は厳密に必要ですか?):

<!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);​

一度に 1 つのアクティブな要素のみを計画している場合は、 のid代わりに を使用し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(eg 4%4=0)にリセットされます。

于 2013-01-01T16:45:36.770 に答える