SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cell text in a span

    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:
    Code:
    <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:
    Code:
    <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. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var sp=x2.getElementsByTagName('span')[0];
    return sp.innerHTML

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •