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 between 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 developers have to 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 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:

Javascript for the simple effects:

You probably think that the 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.

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 old fashioned 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.

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