Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Question about document.getElementById

    Hi, I have a simple prob.

    I have a table like this

    <TABLE class="ms-summarystandardbody" border=0 rules=rows> <TR> <TD class="ms-formlabel" ID="overview01">Survey Name:</TD> <TD class="ms-formbody">survey tryljkjkl</TD> </TR> <TR> <TD class="ms-formlabel" valign="top" ID="overview02">Survey Description:</TD> <TD class="ms-formbody"></TD> </TR> <TR> <TD class="ms-formlabel" ID="overview03">Time Created:</TD> <TD class="ms-formbody">12/15/2005 5:29 PM</TD> </TR> <TR> <TD Class="ms-formlabel" ID="overview04">Number of Responses:</TD> <TD Class="ms-formbody">0</TD> </TR> <TR> <TD><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></TD> </TR> </TABLE>

    this is dynamically generated HTML

    and I want to display whatever is in <TD class="ms-formbody"> </td> from the above table,

    I am doing it,

    Code:
    <script> 
    var name = document.getElementById("overview01").innerHTML;
    //var name = document.getElementByClass("ms-formbody").innerHTML;
    alert(name);
    </script>
    this displays Survey Name: in the alert
    this works fine coz iam using getelementby ID and the td that holds the Survey Name: has ID.

    but the actual one which I need doesn't have ID,

    Is there anyway that I can get whatever text is in the
    <TD class="ms-formbody">survey tryljkjkl</TD>
    from the above table.

    I tried using document.getElementByClass but it gives me an error.

    Th other solution, I was trying to do was Is there any way we can replace the rendered HTML I mean,
    <TD class="ms-formbody">survey tryljkjkl</TD> is the originally rendered HTML but if we could somehow add an ID to that TD making it look like,

    <TD class="ms-formbody" ID="myid">survey tryljkjkl</TD>

    we can use myid to get text. But I just don't know how

    Any help is appreciated. Thanx

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You said that the table was "this is dynamically generated HTML", do you have controll of the code that creates this table? If so you can add the Id to the <td> tag there.

    If not I do have an idea that you might try. I don't have time myself rightnow to figure out all the details, but it might be a way to go.

    Since the <td> tag before it has an Id you could use getElementByType('td') that will return array object with all the td tags. You then could search the array for the td tag with the known id and then grab the next td in the object array. But like I said I don't have time to research the details to give you a finish code product.

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ignored, so deleted.
    Last edited by Ancora; 12-20-2005 at 06:51 PM.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So Ancora,

    I was reading about XML and I remember seeing how you could access data using this type of syntax.

    .nextSibling.firstChild.data
    It is nice to know you can use this in javascript also.

    So if you want the the third html tag after the one with the id and wanted the the second child.data you would use this?

    Code:
     
    whatIwant = getElementById("something").nextsibling.nextsibling.nextchild.data
    Also would the tag types between the Id and the one you wanted make a difference?

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by PhotoJoe47
    So if you want the the third html tag after the one with the id and wanted the the second child.data you would use this?
    Hypothetically, "yes", but using spswss's table, no... the table is setup like:
    <tr>
    <td id="overview01">textNode</td>
    <td>textNode</td>
    </tr>
    So the id'd table cell just has one sibling...

    The tag/type of the elements does not affect the relationships between elements in DOM structure...
    Code:
    <div id="parentElement">
      <a id="child1">text node</a>
      <input type="text" id="child2">text node</input>
      <span id="child3">
        <b>text node</b>
      </span>
    </div>
    The <a>, <input>, and <span> are all children of the <div> element and are all siblings to each other. The <span> is also a parent element to the <b> element, making <b> a grandchild to the <div>.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Soution I think.

    After I did some studying and asked a couple of questions in the DOM scripting forum I came up with this test code:

    Code:
     
    <html>
    <head>
    <title>New Page 3</title>
    <style type="text/css">
     
       .ms-formbody
        {
          text-align: center
        }
    </style>
    <script type="text/javascript">
    function doBoxes()
    {
    var arrTD = document.getElementsByTagName('td'); // return a collection of td objects
    alert("arrTD has " + arrTD.length + " members");  // just wanted to see how many were found  
    for (i = 0; i < arrTD.length; i++) // to check each td object
      {
        if (arrTD[i].className == "ms-formbody")  // test to see if class property matched
          {
             alert(arrTD[i].innerText);  // out put if it did match
          }
         else
          {
            alert("no match"); // out put if it did not match
          }
       }
    }
    </script>
     
    </head>
     
    <body onload="doBoxes()"> // wait until document is loaded to test the <td>'s
     
      <TABLE class="ms-summarystandardbody" border=0 rules=rows>
        <TR> 
          <TD class="ms-formlabel" ID="overview01">Survey Name:</TD>
          <TD class="ms-formbody">survey tryljkjkl</TD> </TR>
        <TR> 
          <TD class="ms-formlabel" valign="top" ID="overview02">Survey Description:</TD>
          <TD class="ms-formbody"></TD> 
        </TR>
        <TR>
          <TD class="ms-formlabel" ID="overview03">Time Created:</TD>
          <TD class="ms-formbody">12/15/2005 5:29 PM</TD>
        </TR>
        <TR>
          <TD Class="ms-formlabel" ID="overview04">Number of Responses:</TD>
          <TD Class="ms-formbody">0</TD>
        </TR> 
        <TR>
          <TD><IMG SRC="../images/spacer9xm.gif" width=1 height=1 alt=""></TD>
        </TR>
      </TABLE>
     
    </body>
    </html>
    and it worked.

    The more I learn about DOM the more I like it.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    alert(arrTD[i].innerText); // out put if it did match
    innerText is an IE only method. Use innerHTML instead.

    Or firstChild.data or firstChild.nodeValue (if you are sure that there is always a textNode inside the cell as a firstChild)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New Coder
    Join Date
    Nov 2005
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I have a simple problem,

    I have a table like this,

    Code:
                 <table border=0>
                   <tr>
                     <td class=ms-propertysheet width=1>
                     <a ID="onetidGoBack1" href="/sites/testsite/Lists/Events/AllItems.aspx"><img border=0 ID="50" alt="Back" src="/_layouts/images/back.gif"></a>
                     </td>
                     <TD class=ms-propertysheet>
                     <a id="onetidGoBack" href="/sites/testsite/Lists/Events/AllItems.aspx"> Go Back to &quot;Changed Events1&quot;</a>
                     </TD>
                   </tr>
                 </table>
    this is dynamically generated, I need to display the text in the id onetidGoBack

    so, I have these functions,

    Code:
    <script><!--
    function mytry()
    {
    	var docsandlists = 'Documents and Lists';
                 var stTitleWhome = 'TestSite Home';
    	var sOutput = '<a href="../../"' +'>' + stTitleWhome+ '</a>' + ' > ';
    	sOutput += '<a href="../../_layouts/1033/viewlsts.aspx"' +'>' + docsandlists + '</a>' + ' > ';
    	//sOutput += document.title;
    	document.write(sOutput);
    }
    //-->
    </SCRIPT>
    and

    Code:
    <script>
    function list_name()
    {
    		var temp_listname = document.getElementById("onetidGoBack").innerHTML
    		//document.getElementById("onetidTitle").innerHTML = "eeee";
    		var listname = temp_listname;
    		listname = listname.toString().split('to')[1];
    		//document.title = listname + ' Customization';
    }
    </script>
    this is the place where I have to display the text,

    Code:
    <table cellspacing=5 border=0 width=100%>
    <tr><td>
         <div class="breadcrumb_link">
    <script> 
    
    mytry() 
    document.write(listname);
    
    </script>
    </div>
    </td> </tr>
    
    </table>
    Here is the body tag,

    Code:
    <BODY marginwidth=0 marginheight=0 scroll="yes" onLoad="javascript:list_name()">
    So, I expect this code should print me,

    TestSite Home > Documents and Lists > Changed Events1 Customization.

    But it just prints,
    TestSite Home > Documents and Lists >

    I think it is because the generated table with the ID I am using is dynamically generated. So, first the code in mytry() executes and prints

    TestSite Home > Documents and Lists >

    with out the listname coz Its not yet been rendered

    and then the listname gets rendered but the display won't be updated again??

    See my problem.

    Anyone knows how to go about this one??

    Thanks for help.

  • #9
    New Coder
    Join Date
    Nov 2005
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind that... I got it resolved


  •  

    Posting Permissions

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