Cleaner way to reference table data?

Using DOM in IE 5.5 I'm dynamically building table rows containing HTML input elements (checkboxes, text boxes, etc.), one element per TD. Note that these rows are clones - all the element id's for a given element are the same across rows.

Now, For certain things I need to reference two or more elements in the same row. For example, if I check this checkbox I want to enable that text box.

When I click a checkbox I know what it's parent is (the specific TD) and the grandparent (the specific row).

My current effort has me grabbing the table row where the click event happend then, using a pair of nested loops searching for the specific field I want. It works, but it looks like overkill to me. There's gotta be a more elegant way. I don't want to search through all the childNodes when I know which field I want, and it has an id unique to that row.

Can I reference things by their id? In other words I want to say something like this:
thisRow = variable reference to the TR object containing the clicked-on element.

thisRow.theTDid.theCheckBox'sId.checked = false;

or at worst:
thisRow.getElementById("theTDid").getElementById("theCheckBoxId").checked = false;

These don't work but what would? I want to avoid blindly iterating through all the TR's childNodes inside a loop going through all the TD's childNotes, looking for a specific data entry element.

all the element id's for a given element are the same across rows

That's a problem in itself. All IDs should be unique, otherwise you're defeating the purpose. Make them unique and you can access each directly.

You can also access individual TD elements using the built-in array properties for tables:

var el = tableElement.rows[i].cells[j]

so if you know which row you're on and which columns you want, you can just use the index:

tdElement = trElement.cells[n];

TD elements also have a .cellIndex property so if you want the next cell to the right use something like:

var nextTdElement = tdElement.parentNode.cells[tdElement.cellIndex + 1]

That's a problem in itself. All IDs should be unique, otherwise you're defeating the purpose. Make them unique and you can access each directly.

Well... um.... I'm going to have to go ahead and disagree with you there.

This design is not unlike a data table where a column is a field. The field has only one name. Every record has a field with that same name.

So I guess I'm hoping/wishing there is a valid object referencing scheme that, given a specific row (TR object), now "dot notation" from that row-parent-reference makes the data cell reference-by-id unique.

The array referencing thing might be handy. I'll look into it further. Thanks.

An HTML table is not the same as a database table, even if it may share some characteristics. The fact remains that the values of ID attributes in an HTML document must be unique (see http://www.w3.org/TR/html401/struct/global.html#adef-id), otherwise they become meaningless.

Most browsers will let you get away with using the same ID just as most can display pages with bad markup. But each is different in how they handle those types of errors. It's not something you want to count on when coding since it will be unpredictable from browser to browser or even version to version.

You might look at the AXIS, HEADERS and SCOPE attributes for table cells (http://www.w3.org/TR/html401/struct/tables.html#adef-axis) which may be more suitable for what you have in mind.

Well below shows how far I got with trying "direct referencing." I got it down to a htmlCollection of table cells (TDs). But the namedItem() property does not work (IE 5.5 windoze) - never mind that Pure JavaScript says it's supported in IE5+.


var thisRow = el.parentNode.parentNode;
var thisRowCells = thisRow.cells;

// the following gives me a "method not supported.." error
var thisFormatHardCell = thisRowCells.getNamedItem("cellformatHard");

// so does this - even though it is a defined "htmlCollection" property
var thisFormatHardCell = thisRowCells.namedItem("cellformatHard");


By the way...
The following works. If I have 3 rows, the alert shows 3 fields with the same id and type.

var SameName = document.getElementsByName("rptFormatHard");
rowCellAlert = "NAME TYPE\n";

for (var x=0; x<SameName.length; x++) {
rowCellAlert += SameName[x].nodeName +
" " +
SameName[x].id + "\n";
}
alert (rowCellAlert);

In the FWIW (for what it's worth) department..

Now I'm making an object out of the table row.

Yes, I still have to traverse around a bit to build the row object, but that's "abstracted away" from the functions that do the real work - checking/validating data across a row (data record); makes for very clean coding when working with the data itself. :thumbsup:

You can always invent your own attributes - they'll mean nothing to the html parser, but you can use them with getAttribute in order to build object sets