/ 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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// 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
Comments
