JavaScript -- reading a table_问答_开发者_运维开发者技术经验分享

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.

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

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

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

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

thank you if you can explain

function createStripedTable(idArray) {
    // for each table ID that we're given, stripe all the rows.
    for (var indx = 0; indx < 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 < 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 < 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";
            }
        }
    }
}

Here's the code that's calling it.

function() {createStripedTable(new Array("MSFTQuotes"))

Here's an excerpt of the one and only one table that is passed.

<body>
    <table id="MSFTQuotes">
        <thead>
            <tr>
                <th colspan="7" align="center">
                    <span class="TableTitle">Stock Activity for Aug 5, 2008 - Nov 5, 2008 </span>
                </th>
            </tr>
            <tr>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        Date</div>
                </th>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        Open</div>
                </th>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        High</div>
                </th>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        Low</div>
                </th>
                <th align="center" wid开发者_JS百科th="14%">
                    <div align="right" class="style5">
                        Close</div>
                </th>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        Volume</div>
                </th>
                <th align="center" width="14%">
                    <div align="right" class="style5">
                        Adj Close</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="right">
                    5-Nov-08
                </td>
                <td align="right">
                    29.21
                </td>
                <td align="right">
                    29.36
                </td>
                <td align="right">
                    29.03
                </td>
                <td align="right">
                    29.31
                </td>
                <td align="right">
                    95,337,696
                </td>
                <td align="right">
                    29.31
                </td>

The function accepts an array of id values corresponding to table elements. It loops through those IDs and does its striping work on all of the tbody elements within the tables.

Somewhat more annotated (see TJC:s):

function createStripedTable(idArray) {
    // for each table ID that we're given, stripe all the rows.
    // TJC: Loop through all of the IDs in the given array
    for (var indx = 0; indx < idArray.length; indx++) {
        // TJC: Get the ID value for index `indx` in the array
        var id = idArray[indx];
        // get the table that corresponds to this ID
        var oTable = document.getElementById(id);
        if (oTable == null) // TJC: Invalid ID, ignore it
            return;

        // get its table body, which contains all the TR tags
        // TJC: Get the `tbody`s under the table. One table
        // can have multiple `tbody` elements.
        var aTBODY = oTable.getElementsByTagName("tbody");

        // set the CSS class for each one of the TR tags 
        for (var i = 0; i < aTBODY.length; i++) {
            // get an array of all the TR tags in the TBODY
            // TJC: It's actually a NodeList, but you can largely
            // treat it as an array
            var aTR = aTBODY[i].getElementsByTagName("tr");

            for (var j = 0; j < 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";
            }
        }
    }
}

The good news is that IE9 finally supports the nth-child pseudo-class, so someday you'll be able to stop doing this with code.

idArray is an array of all IDS for more than one table. This function will change the alternate rows for each of the tables whose id is in idArray.

The outer loop is iterating through ids. The first five lines inside the loop are assuming they are ids of tables, and fetching the contents of the table element corresponding to each ID.

The next five lines in the loop then fetch the table body contents and change the css class of alternate rows.

Add these lines before the first for loop in the code

var tabarray=new Array();
tabarray.push(thetableidYoupassed);
idArray=tabArray

'thetableidYoupassed' is the actual argument with which you called the function 'createStripedTable'

Keep the rest of the code as it is...This should work fine...

Your method accepts an array of table IDs. So all the tables need to have IDs.

function createStripedTable(idArray) { //idArray is an array of table IDs

Then it loops through them and gets the ID one by one

for (var indx = 0; indx < idArray.length; indx++) {
        var id = idArray[indx]; //this is the ID of a table

Then it checks whether the table actually exists in the DOM or not

var oTable = document.getElementById(id); //IF the table with a matching ID is not found, you get NULL
        if (oTable == null) 
            return; //no table that matches the ID? return

Ideally, that line should be continue or something similar. Because in this instance. If you pass your method an array like ['table1', 'table2', 'faketable', 'table3'], your method won't strip table3 because it never gets there in the array (because of the return)