...

View Full Version : Simple Question about document.getElementById



spswss
12-16-2005, 07:52 PM
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,


<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 :confused:

Any help is appreciated. Thanx

PhotoJoe47
12-16-2005, 09:09 PM
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.

Ancora
12-16-2005, 09:32 PM
Ignored, so deleted.

PhotoJoe47
12-16-2005, 11:00 PM
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?



whatIwant = getElementById("something").nextsibling.nextsibling.nextchild.data

Also would the tag types between the Id and the one you wanted make a difference?

Pyth007
12-19-2005, 02:07 PM
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...

<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>.

PhotoJoe47
12-20-2005, 06:45 AM
After I did some studying and asked a couple of questions in the DOM scripting forum I came up with this test 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.

Kor
12-20-2005, 11:00 AM
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)

spswss
12-20-2005, 07:02 PM
Ok, I have a simple problem,

I have a table like this,


<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,


<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


<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,


<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,


<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?? :confused:

Thanks for help.

spswss
12-20-2005, 09:55 PM
Never mind that... I got it resolved



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum