Submitted by: COBOLdinosaur on 2013-02-06 13:47:56
Member Site: http://COBOLdinosaur.com
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: