Advanced Search

Return to Snippet

Revision: 63291
at April 23, 2013 05:52 by COBOLdinosaur
Initial Code 
// these globals make the whole thing more flexible
lastRow=-1;
lastCol=-1;
destRow=-1;
destCol=-1;
// first we set up the loop
function traverse(x,y,xx,yy)
{
    lastRow=x;
    lastCol=y;
    destRow=xx;
    destCol=yy;
    Tcells[lastRow][lastCol].style.backgroundColor='red';
    Tcells[lastRow][lastCol].style.color='white';
    Tcells[destRow][destCol].style.backgroundColor='yellow';
    Tcells[destRow][destCol].style.color='blue';
    CTL=setTimeout('traverseLoop()',500);
}
// now the loop executes until the traverse is completed
function traverseLoop()
{
    if (lastRow==destRow && lastCol==destCol) // we are at the end of the traverse
    {
        Tcells[destRow][destCol].style.backgroundColor='red';
        Tcells[destRow][destCol].style.color='white';
        return;
    }
    if (lastRow!=destRow) // set the row for the new location
    {
        lastRow=(lastRow<destRow) ? lastRow+1 : lastRow-1;
    }
    if (lastCol!=destCol) // set the column for the new location
    {
        lastCol=(lastCol<destCol) ? lastCol+1 : lastCol-1;
    }
    Tcells[lastRow][lastCol].style.backgroundColor='green';
    Tcells[lastRow][lastCol].style.color='orange';
    CTL=setTimeout('traverseLoop()',500); // loop timing is .5 seconds
}
Initial URL 
http://coboldinosaur.com/pages/Table_Traverse.html
Initial Description 
A table is nothing but a set of blocks. A simple grid. There are a lot of web apps where the storage of data in a grid would make functions much easier to deal with using simple scripting. If only it was easy to target cells and traverse between them like a spreadsheet.
Initial Title 
Traversing Tables with DOM Table Methods
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS