getting td value

[turnitup]

Given the id of a tr, does anyone know how to get a value of a td of
that tr?

[Evertjan.]

turnitup wrote on 06 jun 2006 in comp.lang.javas cript:

Given the id of a tr, does anyone know how to get a value of a td of
that tr?

<TD>s do not have a value.

=============== =============== ==========

<table><tr id=myTr><td>bla h</td></tr></table>
<script type='text/javascript'>
var r = document.getEle mentById('myTr' ).firstChild.in nerHTML
alert(r)
</script>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[turnitup]

Evertjan. wrote:

turnitup wrote on 06 jun 2006 in comp.lang.javas cript:

Given the id of a tr, does anyone know how to get a value of a td of
that tr?

<TD>s do not have a value.

=============== =============== ==========

<table><tr id=myTr><td>bla h</td></tr></table>
<script type='text/javascript'>
var r = document.getEle mentById('myTr' ).firstChild.in nerHTML
alert(r)
</script>

Thank you, of course I meant innerHTML!!

[Kam-Hung Soh]

turnitup wrote:

Evertjan. wrote:

turnitup wrote on 06 jun 2006 in comp.lang.javas cript:

Given the id of a tr, does anyone know how to get a value of a td of
that tr?

<TD>s do not have a value.

=============== =============== ==========

<table><tr id=myTr><td>bla h</td></tr></table>
<script type='text/javascript'>
var r = document.getEle mentById('myTr' ).firstChild.in nerHTML
alert(r)
</script>

Thank you, of course I meant innerHTML!!

Here's a longer version which just uses the DOM:

var r = document.getEle mentById('myTr' ).firstChild.fi rstChild.data

The second "firstChild " is the text node within the tr element that
contains "blah".

--
Kam-Hung Soh
http://kamhungsoh.blogspot.com - It Mostly Works
http://members.optusnet.com.au/khsoh - Software That Mostly Works

[RobG]

Kam-Hung Soh wrote:

turnitup wrote:

Evertjan. wrote:

turnitup wrote on 06 jun 2006 in comp.lang.javas cript:

Given the id of a tr, does anyone know how to get a value of a td of
that tr?
<TD>s do not have a value.

=============== =============== ==========

<table><tr id=myTr><td>bla h</td></tr></table>
<script type='text/javascript'>
var r = document.getEle mentById('myTr' ).firstChild.in nerHTML

That method is dependent on the markup in some browsers. If whitespace
is introduced between the TR and TD tags (e.g. <tr ...> <td>...), then
the TR's first child will be a #text node, not the TD in Firefox and I
think other Gecko browsers too.

A better idea is to use the cells collection:

var tr = document.getEle mentById('myTr' );
var td = tr.cells[0];

From memory, Safari 1.0.3 (Mac OS X 10.2) does not properly implement
the table row's cells collection - if that's an issue, you can use
getElementsByTa gName:

var td = tr.getElementsB yTagName('td')[0];

A final method is to walk down the child nodes until a TD is encountered:

var td = tr.firstChild;
while (td && 'td' != td.tagName.toLo werCase() ){
td = td.nextSibling;
}

If there are no TDs in the row, td will be undefined but then the HTML
would be invalid in the first place.

I think that about covers the reasonable methods, take your pick.
[...]

--
Rob

[Evertjan.]

RobG wrote on 07 jun 2006 in comp.lang.javas cript:

Kam-Hung Soh wrote:
No, you left Kam-Hung's relay out of your quote!

turnitup wrote:

Evertjan. wrote:
turnitup wrote on 06 jun 2006 in comp.lang.javas cript:

> Given the id of a tr, does anyone know how to get a value of a td
> of that tr?
<TD>s do not have a value.

=============== =============== ==========

<table><tr id=myTr><td>bla h</td></tr></table>
<script type='text/javascript'>
var r = document.getEle mentById('myTr' ).firstChild.in nerHTML

That method is dependent on the markup in some browsers. If
whitespace is introduced between the TR and TD tags (e.g. <tr ...>
<td>...), then the TR's first child will be a #text node, not the TD
in Firefox and I think other Gecko browsers too.

Your below ideas are better indeed.
A better idea is to use the cells collection:

var tr = document.getEle mentById('myTr' );
var td = tr.cells[0];

From memory, Safari 1.0.3 (Mac OS X 10.2) does not properly implement
the table row's cells collection - if that's an issue, you can use
getElementsByTa gName:

var td = tr.getElementsB yTagName('td')[0];

A final method is to walk down the child nodes until a TD is
encountered:

var td = tr.firstChild;
while (td && 'td' != td.tagName.toLo werCase() ){
td = td.nextSibling;
}

If there are no TDs in the row, td will be undefined but then the HTML
would be invalid in the first place.

I think that about covers the reasonable methods, take your pick.

Since the page's HTML is your own,
why not simply ensure there is no white space?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[RobG]

Evertjan. wrote:

Since the page's HTML is your own,
why not simply ensure there is no white space?

The OP can do that, but I think it creates a maintenance issue - if at
any time in the future the HTML is modified, it is quite possible that
whitespace will be introduced.

Thinking on it a little more, I think a span with an ID should be used
and the date string written to that using getElementById. It means the
span can be put anywhere in the document and removes issues related to
wandering down the DOM tree, such as the different treatment of
whitespace by various browsers and extra elements being introduced (say
the date gets moved to the second cell, or a table-less layout is
adopted). :-)
--
Rob

[Kam-Hung Soh]

RobG wrote:

The OP can do that, but I think it creates a maintenance issue - if at
any time in the future the HTML is modified, it is quite possible that
whitespace will be introduced.

Thinking on it a little more, I think a span with an ID should be used
and the date string written to that using getElementById. It means the
span can be put anywhere in the document and removes issues related to
wandering down the DOM tree, such as the different treatment of
whitespace by various browsers and extra elements being introduced (say
the date gets moved to the second cell, or a table-less layout is
adopted). :-)

I think it's a neat idea! It separates the content (so to speak) from
the markup.

I can feel a design pattern coming on ....

--
Kam-Hung Soh
http://kamhungsoh.blogspot.com - It Mostly Works
http://members.optusnet.com.au/khsoh - Software That Mostly Works

[Evertjan.]

Kam-Hung Soh wrote on 08 jun 2006 in comp.lang.javas cript:

RobG wrote:

[..]

Thinking on it a little more, I think a span with an ID should be
used and the date string written to that using getElementById. It
means the span can be put anywhere in the document and removes issues
related to wandering down the DOM tree, such as the different
treatment of whitespace by various browsers and extra elements being
introduced (say the date gets moved to the second cell, or a
table-less layout is adopted). :-)

I think it's a neat idea! It separates the content (so to speak) from
the markup.

I can feel a design pattern coming on ....

In practice, you build all large tables needing the wanted features by
serverside code, so that having each element id-ed and css-classed is
defaultly incorporated. Most features can then be css and javascript
driven.

Would you call that a design pattern?

ASP-VBS example:

<% newTable "myTable" %>
<% newHeadRow %>
<% newCell "cell content 7" %>
<% newCell defaultCellCont ent %>
<% newBodyRow %>
<% newCell defaultCellCont ent %>
<% newCell "cell content 777" %>
<% endTable %>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Kam-Hung Soh]

Evertjan. wrote:

In practice, you build all large tables needing the wanted features by
serverside code, so that having each element id-ed and css-classed is
defaultly incorporated. Most features can then be css and javascript
driven.

Would you call that a design pattern?

ASP-VBS example:

<% newTable "myTable" %>
<% newHeadRow %>
<% newCell "cell content 7" %>
<% newCell defaultCellCont ent %>
<% newBodyRow %>
<% newCell defaultCellCont ent %>
<% newCell "cell content 777" %>
<% endTable %>

Yes, I agree.

I was thinking of AJAX or Javascript-driven pages in my previous post.
Sorry for not stating the context.

--
Kam-Hung Soh
http://kamhungsoh.blogspot.com - It Mostly Works
http://members.optusnet.com.au/khsoh - Software That Mostly Works