getting td value

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

re: getting td value

turnitup wrote on 06 jun 2006 in comp.lang.javascript:
[color=blue]
> Given the id of a tr, does anyone know how to get a value of a td of
> that tr?[/color]

<TD>s do not have a value.

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

<table><tr id=myTr><td>blah</td></tr></table>
<script type='text/javascript'>
var r = document.getElementById('myTr').firstChild.innerHT ML
alert(r)
</script>

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

re: getting td value

Evertjan. wrote:[color=blue]
> turnitup wrote on 06 jun 2006 in comp.lang.javascript:
>[color=green]
>> Given the id of a tr, does anyone know how to get a value of a td of
>> that tr?[/color]
>
> <TD>s do not have a value.
>
> ========================================
>
> <table><tr id=myTr><td>blah</td></tr></table>
> <script type='text/javascript'>
> var r = document.getElementById('myTr').firstChild.innerHT ML
> alert(r)
> </script>
>[/color]

Thank you, of course I meant innerHTML!!

re: getting td value

turnitup wrote:[color=blue]
> Evertjan. wrote:[color=green]
> > turnitup wrote on 06 jun 2006 in comp.lang.javascript:
> >[color=darkred]
> >> Given the id of a tr, does anyone know how to get a value of a td of
> >> that tr?[/color]
> >
> > <TD>s do not have a value.
> >
> > ========================================
> >
> > <table><tr id=myTr><td>blah</td></tr></table>
> > <script type='text/javascript'>
> > var r = document.getElementById('myTr').firstChild.innerHT ML
> > alert(r)
> > </script>
> >[/color]
>
> Thank you, of course I meant innerHTML!![/color]

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

var r = document.getElementById('myTr').firstChild.firstCh ild.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

re: getting td value

Kam-Hung Soh wrote:[color=blue]
> turnitup wrote:[color=green]
>> Evertjan. wrote:[color=darkred]
>>> turnitup wrote on 06 jun 2006 in comp.lang.javascript:
>>>
>>>> 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>blah</td></tr></table>
>>> <script type='text/javascript'>
>>> var r = document.getElementById('myTr').firstChild.innerHT ML[/color][/color][/color]

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.getElementById('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
getElementsByTagName:

var td = tr.getElementsByTagName('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.toLowerCase() ){
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

re: getting td value

RobG wrote on 07 jun 2006 in comp.lang.javascript:
[color=blue]
> Kam-Hung Soh wrote:[/color]

No, you left Kam-Hung's relay out of your quote!
[color=blue][color=green]
>> turnitup wrote:[color=darkred]
>>> Evertjan. wrote:
>>>> turnitup wrote on 06 jun 2006 in comp.lang.javascript:
>>>>
>>>>> 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>blah</td></tr></table>
>>>> <script type='text/javascript'>
>>>> var r = document.getElementById('myTr').firstChild.innerHT ML[/color][/color]
>
> 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.[/color]

Your below ideas are better indeed.
[color=blue]
> A better idea is to use the cells collection:
>
> var tr = document.getElementById('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
> getElementsByTagName:
>
> var td = tr.getElementsByTagName('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.toLowerCase() ){
> 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.[/color]

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)

re: getting td value

Evertjan. wrote:[color=blue]
>
> Since the page's HTML is your own,
> why not simply ensure there is no white space?[/color]

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

re: getting td value

RobG wrote:[color=blue]
> 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). :-)[/color]

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

re: getting td value

Kam-Hung Soh wrote on 08 jun 2006 in comp.lang.javascript:[color=blue]
> RobG wrote:[/color]
[..][color=blue][color=green]
>>
>> 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). :-)[/color]
>
> 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 ....[/color]

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 defaultCellContent %>
<% newBodyRow %>
<% newCell defaultCellContent %>
<% newCell "cell content 777" %>
<% endTable %>



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

re: getting td value

Evertjan. wrote:[color=blue]
> 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 defaultCellContent %>
> <% newBodyRow %>
> <% newCell defaultCellContent %>
> <% newCell "cell content 777" %>
> <% endTable %>[/color]

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