Accessing table cells by Row #, Col #

#1

I want to be able to access cells within an HTML table, via computed row
number and column number.

I was considering using oTableID.children[] and oTR.children[] arrays.

My question is what browsers and browser versions support this?

If the children[] constructs are not fairly universally supported, then what
is a better approach to doing this?

- David

#2

"David D." <daviddiamond.remove-if-not-spam (AT) comcast (DOT) net> wrote

Quote:

I want to be able to access cells within an HTML table, via computed row
number and column number.

I was considering using oTableID.children[] and oTR.children[] arrays.

My question is what browsers and browser versions support this?

If the children[] constructs are not fairly universally supported, then what
is a better approach to doing this?

- David

What I've done may not be the prettiest solution, but it works. Each
cell in the table gets assigned an ID (<TD id="R5C6">xxxxx</TD>)

Then, if a user clicks in a cell, I use event.srcElement.id to get
the ID of the clicked cell, and take it from there.

#3

Bruce,

Thanks for the suggestion.

Your technique is good for finding which cell was clicked on.

Now, suppose you wanted to change some attributes (e.g., the background
color) of each cell ADJACENT to the cell that was clicked on (above, below,
right, left and diagonal). That's why I was considering an indexed array
solution such as table.children[] and tr.children[]. Alternatively, using
your suggestion, I could parse the name and use the "eval" statement to
reference other cells. I just thought that an integer array index solution
would be easier and more efficient.

However, an important factor is my choice of solution is the percentage
of installed browsers that would support a particular solution.

- David

"bruce" <bruce_brodinsky (AT) glic (DOT) com> wrote

Quote:

"David D." <daviddiamond.remove-if-not-spam (AT) comcast (DOT) net> wrote

I want to be able to access cells within an HTML table, via computed row
number and column number.

I was considering using oTableID.children[] and oTR.children[] arrays.

My question is what browsers and browser versions support this?

If the children[] constructs are not fairly universally supported, then
what
is a better approach to doing this?

- David

What I've done may not be the prettiest solution, but it works. Each
cell in the table gets assigned an ID (<TD id="R5C6">xxxxx</TD>)

Then, if a user clicks in a cell, I use event.srcElement.id to get
the ID of the clicked cell, and take it from there.

#4

David D. wrote:

Quote:

I want to be able to access cells within an HTML table, via computed
row number and column number.

I was considering using oTableID.children[] and oTR.children[]
arrays.

The - children - collection is a Microsoft extension that has also been
implemented by Opera, Konqueror, Safari and IceBrowser but has not been
copied by Mozilla or any other Gecko browser. The nearest direct W3C DOM
equivalent is the - childNodes - collection, but that is a collection of
Nodes and so it also includes non-element nodes and needs to be
traversed with an eye to the - nodeType - property of the objects found
(node.nodeType == 1 for an Element Node). While - children - is a
collection of exclusively element Nodes on IE and most other
implementing browsers (IceBrowser makes an odd decision here and
implements its - children - collection as a reference to its -
childNodes - collection, so it does contain non-element Nodes).

Quote:

My question is what browsers and browser versions support this?

IE 4+, Opera 5+, Konqueror 3+ and Safari 1+ (maybe others), but not
Mozilla or any other Gecko browsers, and IceBrowser gets it wrong (at
least in version 5, version 6 has just been released and I haven't had a
chance to check it out yet).

Quote:

If the children[] constructs are not fairly universally supported,
then what is a better approach to doing this?

The W3C HTML DOM specification adopted the - rows - and - cells -
properties that were introduced by Microsoft in IE 4. TABLE, THEAD,
TBODY and TFOOT elements have - rows - collections that hold references
to all the TR elements they contain. TR elements have - cells -
collections that refer to all the TD and TH elements they contain, in
order.

Those collections would be your best entry point while attempting to
refer to cells by index as they are (more or less) implemented on all
W3C HTML DOM implementing browser and IE 4+.

However, if a browser is tested and found not to implement a - rows -
collection on a, say, TABLE elements there are a number of possible
fall-back options that would give similar results:-

var tableRef = ... //assign a reference to a table element.
var rowsCollection;
if(tableRef.rows){
rowsCollection = tableRef.rows;
}else if(tableRef.getElementsByTagName){
rowsCollection = tableRef.getElementsByTagName('TR');
}else if((tableRef.all)&&(tableRef.all.tags)){
rowsCollection = tableRef.all.tags('TR');
}
if(rowsCollection){
/* We have an object, that may actually be the table's - rows -
collection (or an alternative), and it can give access to a
TR element by index.

A similar, but potentially more involved, strategy can now be
applied to that row to get to it's contained cells. More
involved because rows may contain both TD and TH cells (so -
getElementsByTagName - and - tableRef.all.tags - are not so
easy to apply as fall-back).
*/
}

Richard.

#5

David D. wrote:
<snip>

Quote:

... indexed array solution such as table.children[] and

Strictly - table.children[] - would not contain references to TR
elements as TABLE elements are only allowed to directly contain CAPTION,
COL, COLGROUP, THEAD, TFOOT and TBODY elements. It is the THEAD, TFOOT
and TBODY elements that are the direct ancestors of TH and TD elements.
And each table will contain at least one TBODY, even if no tags for the
element are provided in the HTML as TBODY opening and closing tags are
optional. A TR placed directly within a table would always imply its
containing TBODY.

<snip>

Quote:

... and use the "eval" statement to reference other cells. ...
snip

The - eval - function is never needed to access elements (even
dynamically), see:-

<URL: http://jibbering.com/faq/#FAQ4_39 >

- and its referenced article, and:-

<URL: http://jibbering.com/faq/#FAQ4_40 >

Quote:

"bruce" <bruce_brodinsky (AT) glic (DOT) com> wrote in message

Please do not top-post to comp.lang.javascript.

Richard.

#6

Richard,

Thanks for your detailed answer. This sounds like the best approach
for me to take.

Actually, I just got back from a book store where I took a look at the
latest O'Reilley DHTML book. It said that cells[] and rows[] are supported
by IE 4 and NN 6. I do not know what percentage of IE and NN browsers are
older than that. But it sounds like your approach should cover most
browsers.

I will also take a look at the links from your other posting.

Thanks.

- David

"Richard Cornford" <Richard (AT) litotes (DOT) demon.co.uk> wrote

Quote:

David D. wrote:
I want to be able to access cells within an HTML table, via computed
row number and column number.

I was considering using oTableID.children[] and oTR.children[]
arrays.

The - children - collection is a Microsoft extension that has also been
implemented by Opera, Konqueror, Safari and IceBrowser but has not been
copied by Mozilla or any other Gecko browser. The nearest direct W3C DOM
equivalent is the - childNodes - collection, but that is a collection of
Nodes and so it also includes non-element nodes and needs to be
traversed with an eye to the - nodeType - property of the objects found
(node.nodeType == 1 for an Element Node). While - children - is a
collection of exclusively element Nodes on IE and most other
implementing browsers (IceBrowser makes an odd decision here and
implements its - children - collection as a reference to its -
childNodes - collection, so it does contain non-element Nodes).

My question is what browsers and browser versions support this?

IE 4+, Opera 5+, Konqueror 3+ and Safari 1+ (maybe others), but not
Mozilla or any other Gecko browsers, and IceBrowser gets it wrong (at
least in version 5, version 6 has just been released and I haven't had a
chance to check it out yet).

If the children[] constructs are not fairly universally supported,
then what is a better approach to doing this?

The W3C HTML DOM specification adopted the - rows - and - cells -
properties that were introduced by Microsoft in IE 4. TABLE, THEAD,
TBODY and TFOOT elements have - rows - collections that hold references
to all the TR elements they contain. TR elements have - cells -
collections that refer to all the TD and TH elements they contain, in
order.

Those collections would be your best entry point while attempting to
refer to cells by index as they are (more or less) implemented on all
W3C HTML DOM implementing browser and IE 4+.

However, if a browser is tested and found not to implement a - rows -
collection on a, say, TABLE elements there are a number of possible
fall-back options that would give similar results:-

var tableRef = ... //assign a reference to a table element.
var rowsCollection;
if(tableRef.rows){
rowsCollection = tableRef.rows;
}else if(tableRef.getElementsByTagName){
rowsCollection = tableRef.getElementsByTagName('TR');
}else if((tableRef.all)&&(tableRef.all.tags)){
rowsCollection = tableRef.all.tags('TR');
}
if(rowsCollection){
/* We have an object, that may actually be the table's - rows -
collection (or an alternative), and it can give access to a
TR element by index.

A similar, but potentially more involved, strategy can now be
applied to that row to get to it's contained cells. More
involved because rows may contain both TD and TH cells (so -
getElementsByTagName - and - tableRef.all.tags - are not so
easy to apply as fall-back).
*/
}

Richard.