Tim Johnson wrote:
Hi:
Is it possible to reference a table which contains a select list that
has an event handler that modifies the table, without using the table
ID?
Example: <table id="SearchTable">
event handler in select list is
onChange="addTableRow('SearchTable')"
And in addTableRow(), I have the following code:
var tbl = document.getElementById(which);
// etc, etc, works fine BUT, is
// there a component of the DOM that allows me to reference
// the table as a parent?
If so, pointers and URLs to appropriate documentation would
suffice.
Thanks
tim
<table ...>
...
< ... onclick="getTableParent(this)" ...>
...
</table>
<script type="text/javascript">
function getTableParent(x){
while ( "table" != x.nodeName.toLowerCase() && x.parentNode ) {
x = x.parentNode
}
return ( "TABLE" == x.nodeName )? x : null;
}
</script>
However, if you want to add rows, you must to add them to the tbody
element, not the table element. Even if you don't put a tbody
element in the HTML source, the browser will insert one at an
appropriate place. IE will not add a row to a table element, you
must add them to the tbody.
Other browsers will cope with script adding rows to the body (they
work out the tbody was intended), but not IE. If there are multiple
tbody elements, clearly you want to target the right one.
So the function should probably be:
function getTbodyParent(x){
while ( "tbody" != x.nodeName.toLowerCase() && x.parentNode ) {
x = x.parentNode
}
return ( "tbody" == x.nodeName.toLowerCase() )? x : null;
}
And whatever function calls getTbodyParent should ensure that the
return is not null.
--
Rob