DOM API

[asfaw]

I am trying to read a table (table id= "Table1") in a document and find all instances of tag names "span" extract the value contained in each span tag.

I used the following and it does not work:
function flag() {
var text = ""
var table1 = document.getElementById("Table1");
var test1 = table1.getElementsByTagName("span");
var children = test1.childNodes;
for(i = 0; i < children.length; i ++) {
text += children.nodeValue;
}
alert(text);
}

The error I am getting is 'children has no properties'.

Your help is appreciated.

In case you would like to see the table:
<table id="Table1" border="1" cellspacing="1" cellpadding="2" width="100%">
<tr color="yellow">
<td width="120" style=" background-color: rgb(255,255,153);" height=" 23">
<p style="background-color: rgb(255,255,153);">
<b><span style="font-size: xx-small; color: rgb(102,102,51);">Last name</span></b>
</p>
</td>
<td width="88" style="background-color: rgb(255,255,153);">
<p style="background-color: rgb(255,255,153);">
<b><span style="font-size: xx-small; color: rgb(102,102,51);">First name</span></b>
</p>
</td>
<td width="100" style="background-color: rgb(255,255,153);">
<p style="background-color: rgb(255,255,153);">
<b><span style="font-size: xx-small; color: rgb(102,102,51);">Date</span></b>
</p>
</td>
<td width="73" style="background-color: rgb(255,255,153);">
<p style="background-color: rgb(255,255,153);">
<b><span style="font-size: xx-small; color: rgb(102,102,51);">Acct Balance</span></b>
</p>
</td>
<td width="89" style="background-color: rgb(255,255,153);">

<p style="background-color: rgb(255,255,153);">
<b><span style="font-size: xx-small; color: rgb(102,102,51);">Monthly transactions</span></b>
</p>
</td>
</tr>
<tr>
<td width="120" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">Smith</span>
</p>
</td>
<td width="88" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">Peter</span>
</p>
</td>
<td width="100" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">Oct 5, 2005</span>
</p>
</td>
<td align="right" width="73" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">1,560.25</span>
</p>
</td>
<td align="right" width="89" style="background-color: rgb(255,255,255);">
<p style="text-align: right; padding-right: 5pt;">
<span style="font-size: x-small;">20</span>
</p>
</td>
</tr>
<tr>
<td width="120" style="background-color: rgb(255,255,255);"height=" 18">
<p>
<span style="font-size: x-small;">Serenty</span>
</p>
</td>
<td width="88" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">John</span>
</p>
</td>
<td width="100" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">Oct 7, 2005</span>
</p>
</td>
<td align="right" width="73" style="background-color: rgb(255,255,255);">
<p>
<span style="font-size: x-small;">261.00</span>
</p>
</td>
<td align="right" width="89" style="background-color: rgb(255,255,255);">
<p style="text-align: right; padding-right: 5pt;">
<span style="font-size: x-small;">3</span>
</p>
</td>
</tr>
</table>

 

[asfaw]

How would I get the text value of span tag using DOM API:

<span>Test</span>

Regards,

asfaw

 

[tsdragon]

The text value of the span is actually the value of the textnode that is a child of the span.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[asfaw]

Thank you Tracy. What would be the syntax to get the value the textnode that is a child of the span?

Assumming I have more than one span tag in the document this is the code I started with:

function flag() {

var text = "";
var spanTag = getElementsByTagName("span");
alert(spanTag.length);
for(i = 0; i < spanTag.length; i++) {
text += spanTag.childNodes.nodeValue;
}
alert(text);
}
The first alert returns 50 (which is correct) the next alert returns an error message - spanTag.childNodes has no properites.


I am sorry - the subject is new for me. Your help is very much appreciated.

Regards.

asfaw

 

[tsuji]

>[tt] text += spanTag.childNodes.nodeValue;[/tt]
[tt] text += spanTag[red][/red].childNodes[red][0][/red].nodeValue;[/tt]
Or in most circumstances, you can use innerHTML.
[tt] text += spanTag[red][/red].[blue]innerHTML[/blue];[/tt]

 

[asfaw]

Thank you all. I was able to use your help and came out with the following answer that works in both IE6 and FireFox1.0.7.

function getTextValue() {
var table = document.getElementById("Table1");
var spanTag = table.getElementsByTagName("span");
for (i = 8; i < spanTag.length; i +=4) {
var acctBalance = spanTag.childNodes[0].nodeValue;
// strip commas
acctBalanceNumeric = acctBalance.replace(/,/g, "");
// get numeric value
acctBalanceNumeric = parseFloat(acctBalanceNumeric);
if (acctBalanceNumeric > 1000) {
var monthlyTrans = spanTag[i = i + 1].childNodes[0].nodeValue;
// strip commas
monthlyTransNumeric = monthlyTrans.replace(/,/g, "");
// get numeric value
monthlyTransNumeric = parseFloat(monthlyTransNumeric);
if (monthlyTransNumeric > 10) {
alert(acctBalanceNumeric + " - " + monthlyTransNumeric);
spanTag[i = i].style.color = "#E3372E";
spanTag[i = i].style.backgroundColor = "#FEF76E";
spanTag[i = i - 1].style.color = "#E3372E";
spanTag[i = i].style.backgroundColor = "#FEF76E";
}
}
}
}


Best regards,

asfaw