Cell text in a span

JavaScript
1

In the following table segment, I have been trying to use DOM techniques to get the text values.
For example in this line: (<span id=“edit5_oname” >BOBBY</span>), I only want to get BOBBY.
What’s happing is if I use alert(x[2].innerHTML); it returns <span id=“edit5_ownerid”>8</span>.
I have tryed various techniques like:
alert(x[2].data);
alert(x[2].innerHTML);
alert(x[2].firstChild.nodeValue);
alert(x[2].firstChild.firstChild.nodeValue);
Also various:
parentNode
lastChild
nextSibling
offsetParent
previousSibling
Some of these return an alert with nothing, others return undefined.
Normally when there is no span involved the alert(x[2].firstChild.nodeValue); works everytime.
Does anyone know the correct technique to pluck out just the text? Thanks
Whole table not shown:


<tr valign="top"  id="a1" onclick="cell(this.id)">
<td align="left" class="listIcons" valign="middle" nowrap="nowrap">
<a href='olookup_edit.php?editid1=8' id="editlink5" title="Edit"><img class="listIcon" src="images/icon_edit_new.gif" align="middle" alt="Edit" border="0"></a>
</td>
<td align="left" valign="middle" width="20" >
<input type="checkbox" name="selection[]" value="8" id="check1_5">
</td>
<td valign="middle" align="right">
<span id="edit5_ownerid" >8</span>
</td>
<td valign="middle" align="left">
<span id="edit5_oname" >BOBBY</span>
</td>
<td valign="middle" align="left">
<span id="edit5_ostreet" >B WAY</span>
</td>
</tr>

Here is the js function:


<script type="text/javascript">

function cell(id)
 {
var x=document.getElementById('maintable').rows[id].cells;
alert(x[2].innerHTML);
//opener.document.editform1.display_value_ownerid_1.value = x[1].firstChild.nodeValue;
//opener.document.editform1.display_value_petowner_1.value = x[2].firstChild.nodeValue;
//opener.document.editform1.display_value_ostreet_1.value = x[3].firstChild.nodeValue;
self.close();
}
2

If you look at the childNodes.length of your td element node, you’ll see theres 2 or 3 children. The span element being one of them, but there could also be a text node element before and after the span(due to the whitespace from indenting and newlines).

And…various browsers aren’t totally consistent here, so you need to be real careful if you traverse the dom like this, because your code will be very brittle.

The reason it works when there’s no span is because you end up with a single contiguous text node, so it will be the first child. But, text nodes can’t have children, so when you put another type of node in there, the text node might need to be split into two to accommodate the element node.

3

var sp=x2.getElementsByTagName(‘span’)[0];
return sp.innerHTML

4

Thanks, works like a champ. I only changed it to:
getElementsByTagName(‘span’)[0].firstChild.nodeValue
which works.
I was really after these 3 main lines of code:


opener.document.editform1.value_ownerid_1.value = x[1].getElementsByTagName('span')[0].firstChild.nodeValue;
opener.document.editform1.value_petowner_1.value = x[2].getElementsByTagName('span')[0].firstChild.nodeValue;
opener.document.editform1.value_ostreet_1.value = x[3].getElementsByTagName('span')[0].firstChild.nodeValue;

In order to return some values from a popup window.
ABOVE works ------- thanks