title: Continuous paused loop through table elements
body: <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>