title: Loop within a function to alt color table rows
body: <p>I have a query building form built in PHP.  The results of the query are returned and placed in two different tables one above the other. (table id's are results, and results2)  Each record returned builds two tables to display its data. (Soon to be three)</p>
  
  <p>I'm using the following code to change the class tags of my <code>&lt;tr&gt;</code>'s to provide alternate row coloring:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function alternate(id){
    if(document.getElementsByTagName){
      var table = document.getElementById(id);
      var rows = table.getElementsByTagName("tr");
      for(i = 0; i &lt; rows.length; i++){
        if(i % 2 == 0){
         rows[i].className = "row-one";
         }else{
         rows[i].className = "row-two";
              }
            }
           }
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>Then I'm using a body onload like so:</p>
  
  <pre><code>&lt;body onload="alternate('results'); alternate('results2');"&gt;
  </code></pre>
  
  <p>The problem is it only colors the first two instances of these tables, when depending on the amount of records returned there could be hundreds of them.</p>
  
  <p>How can I get this function to apply to every table in the document with a id = results and results2 and soon to be a results3?</p>