Continuous paused loop through table elements
<p>I want to continuously cycle through the rows of a table, highlighting a row, then pausing and moving to the next row. When I reach the end I want to go back around and start at the beginning again.</p>

<p>I liked roXon's answer the best because it felt more concise and functional, so I expanded it to work with three tables. But now there's code duplication -- what is the most elegant way to write the code without duplication, that allows for different tables and colors? Here's the working three-table solution (also, is the inner function strictly necessary?):</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.highlight1 { background:gold; }
.highlight2 { background:lightblue; }
.highlight3 { background:lightgreen; }
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script language="javascript" type="text/javascript"&gt;
$(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);
  });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table id="table1" border="1"&gt;
  &lt;th&gt;Table One&lt;/th&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 4&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 5&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 6&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;table id="table2" border="1"&gt;
  &lt;th&gt;Table Two&lt;/th&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 4&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 5&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 6&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;table id="table3" border="1"&gt;
  &lt;th&gt;Table Three&lt;/th&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 3&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 4&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 5&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Table Row 6&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
