Accessing table cell w/o an ID 1

greedyzebra · May 14, 2003

In the following code:

<html>
<head>
<style type="text/css">
.hideMe {display : none}
</style>
</head>
<body>
<table border="0" width="60%" id="theTable">
<tr>
<td width="50%"><input type="button" value="Click Here" onclick="document.getElementById('tCell1').onclick()"></td>
<td width="50%" class="hideMe" onclick="this.style.display='inline'" id="tCell1">Data for cell 1</td>
</tr>
<tr>
<td width="50%"><input type="button" value="Click Here" onclick="document.getElementById('tCell2').onclick()"></td>
<td width="50%" class="hideMe" onclick="this.style.display='inline'" id="tCell2">Data for cell 2</td>
</tr>
<tr>
<td width="50%"><input type="button" value="Click Here" onclick="document.getElementById('tCell3').onclick()"></td>
<td width="50%" class="hideMe" onclick="this.style.display='inline'" id="tCell3">Data for cell 3</td>
</tr>
<tr>
<td width="50%"><input type="button" value="Click Here" onclick="document.getElementById('tCell4').onclick()"></td>
<td width="50%" class="hideMe" onclick="this.style.display='inline'" id="tCell4">Data for cell 4</td>
</tr>
</table>
</body>
</html>

I would think that instead of having to create a separate id for each table cell in the "hideMe" class I could access what appears to be the next node in the document tree (the table cells are part of the same table row, right?).

If that doesn't make sense, I guess my question boils down to this, how can I affect the style attributes of cell 2 by clicking the button in cell 1 without having to have the unique id's for the cells not containing the button?

Thanks.

palbano · May 14, 2003

by what other criteria do you think you want to locate the target DOM element?

-pete
_{I just can't seem to get back my IntelliSense}

greedyzebra · May 14, 2003

I've tried to access child nodes, but that didn't work.

Don't know, really. I guess that's oen of the reasons for the post

Since, in my projects, I've used CGI scripts that produce tables, the burden of creating dozens (in some cases hundreds) of unique ids has not been a problem; the script does it. However, in a situation where I would have to "hand code" the ids, it would be a little bit of a pain.

Just thought there might be a better way...

shadedecho · May 14, 2003

All documentation I've ever read says you cannot rely on the order that items appear in collections in the DOM... for instance, items do not appear in any particular order in the form.elements[] collection, even though it would make sense that they would be in the same order as they were declared.

However, some places do adhere to the "order-defined" criteria, like with <div>'s, those do appear sequentially in the "all" collection of the document object (to the best of my knowledge).

As such, since its definitely not a declared and definite thing, you're going to have spotty browser-dependent behavior with an assumption like that. Best way to achieve this is to have a unique ID. Hope this helps clarify.

greedyzebra · May 14, 2003

Thanks, shade. I played around with accessing parent and child nodes, but I think, as you explained, that the elements collection's not necessarily being in order prevented any success.

I thought of the idea because I thought not having to have unique ids would save some typing, but I think there would be more typing involved if I tried to access the elements without the ids!

Thanks again!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Accessing table cell w/o an ID 1

greedyzebra

Technical User

palbano

Programmer

greedyzebra

Technical User

shadedecho

Programmer

greedyzebra

Technical User

Similar threads

Part and Inventory Search

Sponsor