find form elements in particular TableRow

[thomasamillergoogle]

Hi, As you can see from the code below I have a simple js function
called getFormElementsinTableRow(rowName). rowName is the ID of the
tableRow. I just want to use js to find the child ID's of all the form
elements in that particular tableRow. What am I doing wrong?


<table><tr id="where12" style="DISPLAY:none">
<td><select name="parameter12" id="parameter12">
<option value="1">casenumber</option>
<option value="2">analyst</option>
</select>
<div class='button'>
<A href='#' onclick="javascript:getFormElementsinTableRow
('where12');"> DELETE ROW </A>
<div></td></tr></table>

<Script jang=javascript>
function getFormElementsinTableRow(rowName){

var nodeList = document.getElementById(rowName);

for (var i = 0; i < nodeList.length; i++)
{
var node = nodeList;
alert(node.id);
}

}
<script>

 

[RobG]

Hi, As you can see from the code below I have a simple js function
called getFormElementsinTableRow(rowName). rowName is the ID of the
tableRow. I just want to use js to find the child ID's of all the form
elements in that particular tableRow. What am I doing wrong?


<table><tr id="where12" style="DISPLAY:none">
<td><select name="parameter12" id="parameter12">
<option value="1">casenumber</option>
<option value="2">analyst</option>
</select>
<div class='button'>
<A href='#' onclick="javascript:getFormElementsinTableRow
('where12');"> DELETE ROW </A>

There is no need for the javascript pseudo-protocol, and your onclick
should return false to stop browsers from going back to the top of the
page.

<A href='#' onclick="
getFormElementsinTableRow('where12');
return false;
"> DELETE ROW </A>

Even better would be to not subvert an A element and use something more
suitable - span, div, input type=button, button, etc.

<div></td></tr></table>

^-- Closing tag?

<Script jang=javascript>

I'll assume that is a copy/paste error. The 'lang' attribute never
existed for script elements, there is a depreciated 'language'
attribute, but type is required:

function getFormElementsinTableRow(rowName){

var nodeList = document.getElementById(rowName);

getElementById() returns a reference to an element. In this case,
'nodeList' will be a reference to the TR element - it is not an array
or collection. nodeList.length will be 'undefined'.

Using what are (to me) more suitable variable names:

function getFormElementsinTableRow( rowID ){
var r = document.getElementById(rowID);
var rA = r.getElementsByTagName('*');

for (var i = 0; i < nodeList.length; i++)
{
var node = nodeList;
alert(node.id);
}

Here is an alternative that shows the elements and their ID if they
have one:

var x, i=0;
while ( x = rA[i++] ) {
alert( x.nodeName + '\n' +
((x.id)? 'id: ' + x.id : ' no ID'));
}

}
<script>

Closing tag?


If you want just the form elements, you'll have to sift through the
collection in rA. If this is for more than casual interest, you should
feature test getElementById and getElementsByTagName before using
them and you may also want to add support for document.all.

Here's the full script:

<script type="text/javascript">

function getFormElementsinTableRow( rowID ){
var r = document.getElementById( rowID )
var rA = r.getElementsByTagName('*');
var x, i=0;

while ( x = rA[i++] ) {
alert( x.nodeName + '\n' +
((x.id)? 'id: ' + x.id : 'no ID') );
}
}
</script>

 

[thomasamillergoogle]

Thanks Rob for working through my assored typos and brain farts. It
works beautifully now.