JavaScript -- reading a table
<p>This is a function that, when passed a table as an argument, applies a different style color to alternating rows to improve readability. i.e. first row is dark grey, second row is light grow, third row is dark grey etc. </p>

<p>As mentioned, it gets passed the whole table as an argument. None of the rows have ids.  Starting at this line  <code>var aTBODY = oTable.getElementsByTagName("tbody");</code>, I understand what is happening. Namely, it gets the table body and then all the rows within it and stripes them alternately. </p>

<p>1) But what is happening exactly in the first five lines of the program? The comments don't explain it clearly for me.  </p>

<p>2) does looping over a table length (i.e idArray.length) create an array of rows? what is happening with var id = idArray[indx]; ?</p>

<p>3) When it says, in the comments, <code>get the table that corresponds to this id</code>, using the code <code>var oTable = document.getElementById(id)</code> why is this a necessary step? what is happening? </p>

<p>thank you if you can explain</p>

<pre><code>function createStripedTable(idArray) {
    // for each table ID that we're given, stripe all the rows.
    for (var indx = 0; indx &lt; idArray.length; indx++) {
        var id = idArray[indx];
        // get the table that corresponds to this ID
        var oTable = document.getElementById(id);
        if (oTable == null) 
            return;

        // get its table body, which contains all the TR tags
        var aTBODY = oTable.getElementsByTagName("tbody");

        // set the CSS class for each one of the TR tags 
        for (var i = 0; i &lt; aTBODY.length; i++) {
            // get an array of all the TR tags in the TBODY
            var aTR = aTBODY[i].getElementsByTagName("tr");

            for (var j = 0; j &lt; aTR.length; j++) {  
                // the % operator divides the given number by another
                // and returns the remainder. This is how we alternate the
                // rows. 
                aTR[j].className = (j % 2 == 1) ? "stripe1" : "stripe2";
            }
        }
    }
}
</code></pre>

<p>Here's the code that's calling it. </p>

<pre><code>function() {createStripedTable(new Array("MSFTQuotes"))
</code></pre>

<p>Here's an excerpt of the one and only one table that is passed. </p>

<pre><code>&lt;body&gt;
    &lt;table id="MSFTQuotes"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th colspan="7" align="center"&gt;
                    &lt;span class="TableTitle"&gt;Stock Activity for Aug 5, 2008 - Nov 5, 2008 &lt;/span&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Date&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Open&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        High&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Low&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Close&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Volume&lt;/div&gt;
                &lt;/th&gt;
                &lt;th align="center" width="14%"&gt;
                    &lt;div align="right" class="style5"&gt;
                        Adj Close&lt;/div&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td align="right"&gt;
                    5-Nov-08
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    29.21
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    29.36
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    29.03
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    29.31
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    95,337,696
                &lt;/td&gt;
                &lt;td align="right"&gt;
                    29.31
                &lt;/td&gt;
</code></pre>
