Posted By

COBOLdinosaur on 04/23/13

Tagged

Versions (?)

Last Edited at 04/23/13 05:52am

Statistics

Viewed 379 times

Favorited by 0 user(s)

Related snippets

Traversing Tables with DOM Table Methods

/ Published in: CSS

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.

Highlighted TextExpand

// 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
}

URL: http://coboldinosaur.com/pages/Table_Traverse.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.