Dzone icon Reddit icon
Facebook icon RSS Icon Borrow my code


Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, Digital Point, and other progressive Q/A sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Traversing Tables with DOM Table Methods

Submitted by: COBOLdinosaur on 2013-02-06 13:47:56

Member Site:

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 them like a spreadsheet.

Table Property - The cell Collection

As we all know HTML tables are constructed as a grid of rows using <tr>, and cells defined with <th> and <td>. To Access individual cells many developers use document.getElementById() which means a lot of extra code to apply the extra ids. There is the Nodes collection in the DOM, but if you just need table cells there are local table properties that make it much easier.

Every table or tbody has a collection rows[] and each of the rows has a collection cells[]. That makes row cell references a simple matter of indexing. We will use a table with a tbody with id="gridtab"; 8 row by 8 columns. Using an onload event we will create a two dimensional array of cell handles thus:

Now any cell can be referenced with Tcell[rowIndex][columnIndex] allowing many effects. Here is the table:

cell:0/0 cell:0/1 cell:0/2 cell:0/3 cell:0/4 cell:0/5 cell:0/6 cell:0/7
cell:1/0 cell:1/1 cell:1/2 cell:1/3 cell:1/4 cell:1/5 cell:1/6 cell:1/7
cell:2/0 cell:2/1 cell:2/2 cell:2/3 cell:2/4 cell:2/5 cell:2/6 cell:2/7
cell:3/0 cell:3/1 cell:3/2 cell:3/3 cell:3/4 cell:3/5 cell:3/6 cell:3/7
cell:4/0 cell:4/1 cell:4/2 cell:4/3 cell:4/4 cell:4/5 cell:4/6 cell:4/7
cell:5/0 cell:5/1 cell:5/2 cell:5/3 cell:5/4 cell:5/5 cell:5/6 cell:5/7
cell:6/0 cell:6/1 cell:6/2 cell:6/3 cell:6/4 cell:6/5 cell:6/6 cell:6/7
cell:7/0 cell:7/1 cell:7/2 cell:7/3 cell:7/4 cell:7/5 cell:7/6 cell:7/7


Code For the Form

All the scripting and the form layout are in the download file.

Javascript For the Simple Effects

You probably think that the traverse takes a lot of code. Wrong! Setting up the cell array makes the traversal a walk in the park. We make it more flexible by moving the input parameters to global variables so we don't have to pass the parameters internally. So there are just three easy steps: set the globals; set up the start and end positions; a simple loop.

Traversal Code

Because the cell array actually contains handles to the cells it can be used to reference any attribute of the cell like:
Tcell[x][y].id Tcell[x][y].innerHTML Tcell[x][y].className.

So anytime you have to access cells and cell attributes consider using a cell collection. If you prefer to use Jquery instead of the more efficient and reliable straight javascript, you can probably convert this relatively easily. If you lack the skills to do that, then you should not be using Jquery until you know javascript well enough to understand how manipulation of the document object actually works.

While the highlighting of cells may be cute; it is of pretty limited value. The visual effects are mainly for illustration, the real value in methods like this is the ability to address individual cells so you can access the content from the grid for other uses like populating form fields or enhancing other elements in the page. The effects are okay, but the real power is in onpage programming using the grid as a data store. There is no reason the table even has to be displayed is you are using it for storing values and you have a two dimensional index array available to store or access anything you need. You could also do effects by showing/ hiding cells or groups of cells with CSS transitions.

All the code for this can be downloaded as a single text file.

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE

Not a member of COBOLdinosaur yet? FREE registration takes less than a minute