DOM problems

I am still having problems with the dom. blah ...

I have a table like:

<tbody id="list">
<tr>
<td>a</td> <td>b</td> <td>c</td> <td>d</td>

</tr>
</tbody>

To get the values "a", "b", "c", and "d" I have this code:

// get a list of all the tbody elements (there will only be one)

var my_tbody = document.getElementsByTagName("tbody").item(0);

//the first tr element under tbody
var my_row = my_tbody.getElementsByTagName("tr").item(0);

//the first td element under tr
var my_cell = my_row.getElementsByTagName("td").item(0);

//look at each td cell value
for( i=0; i<my_cell.childNodes.length; i++ )
{
mycelnode = my_cell.childNodes.item(i);
mytext = mycelnode.nodeValue;
alert(mytext);
}

To update the values to "x" I have this code:

//look at each value
for( i=0; i<my_cell.childNodes.length; i++ )
{
mycelnode = my_cell.childNodes.item(i);
mytext = mycelnode.nodeValue = "x";
}

This is not working. Any help is appreciated.

Mike

re: DOM problems

Michael Hill said:[color=blue]
>
>I am still having problems with the dom. blah ...[/color]

[color=blue]
> //the first td element under tr
> var my_cell = my_row.getElementsByTagName("td").item(0);
>
> //look at each td cell value
> for( i=0; i<my_cell.childNodes.length; i++ )
> {
> mycelnode = my_cell.childNodes.item(i);
> mytext = mycelnode.nodeValue;
> alert(mytext);
> }[/color]

That loop does not look at each td cell value.
It looks at each childNode of my_cell, which is the first td element.
You need to loop through the childNodes of the tr tag, and alert
the first childNode of each of those td nodes.


[color=blue]
>This is not working. Any help is appreciated.[/color]

"This is not working" is not useful information.
You should tell us what error messages or misbehavior you see.

re: DOM problems

>[color=blue]
> That loop does not look at each td cell value.
> It looks at each childNode of my_cell, which is the first td element.
> You need to loop through the childNodes of the tr tag, and alert
> the first childNode of each of those td nodes.
>[/color]

OK, this is a little better but I am still not getting a look at the td
elements

// get a list of all the tbody elements (there will only be one)
var my_tbody=document.getElementsByTagName("tbody").it em(0);

//element itself is the first item of the list
var my_row = my_tbody.getElementsByTagName("tr");

alert("number of tr elements: " + my_row.length);

for( i=0; i<my_row.length; i++ )
{
var my_cell = my_row.getElementsByTagName("td").item(i);
alert("number of td elements: " + my_cell.length);
for( j=0; j<my_cell.length; j++ )
{
myrownode = my_cell.item(j).nodeName;
alert(myrownode);
}
}

re: DOM problems

"Michael Hill" <hillmw@charter.net> wrote in
news:vso9upb2ds8m3b@corp.supernews.com:
[color=blue]
> OK, this is a little better but I am still not getting a look at the td
> elements
>
> // get a list of all the tbody elements (there will only be one)
> var my_tbody=document.getElementsByTagName("tbody").it em(0);
>
> //element itself is the first item of the list
> var my_row = my_tbody.getElementsByTagName("tr");
>
> alert("number of tr elements: " + my_row.length);
>
> for( i=0; i<my_row.length; i++ )
> {[/color]

Here you're looping over each row. I thought you were only interested in
the first row?
[color=blue]
> var my_cell = my_row.getElementsByTagName("td").item(i);[/color]

Here you get the i'th TD from the i'th row, that is, column 1 from row 1,
column 2 from row 2, and so on. IOW, you're going down the diagonal of the
table rather than across the rows.
[color=blue]
> alert("number of td elements: " + my_cell.length);[/color]

It's always showing you "1", right?
[color=blue]
> for( j=0; j<my_cell.length; j++ )
> {[/color]

Now you're looping over a single element.
[color=blue]
> myrownode = my_cell.item(j).nodeName;
> alert(myrownode);
> }
> }[/color]

re: DOM problems

[color=blue]
> Here you're looping over each row. I thought you were only interested in
> the first row?
>[color=green]
> > var my_cell = my_row.getElementsByTagName("td").item(i);[/color]
>[/color]

I have a number of problems:

// get a list of all the tbody elements (there will only be one)
var my_tbody=document.getElementsByTagName("tbody").it em(0);

//element itself is the first item of the list
var my_row = my_tbody.getElementsByTagName("tr");

This statement is retrieving "all" the tr elements in the document. I
thought I was getting only the 'tr' elements under the node my_tbody.

I'd like to start with the 'tbody' tag and walk down through to the cell
contents.

Mike

re: DOM problems

Michael Hill <hillmw@ram.lmtas.lmco.com> writes:
[color=blue]
> I am still having problems with the dom. blah ...
>
> I have a table like:
>
> <tbody id="list">
> <tr>
> <td>a</td> <td>b</td> <td>c</td> <td>d</td>
>
> </tr>
> </tbody>
>
> To get the values "a", "b", "c", and "d" I have this code:[/color]

....
Accessing a table's cells is easier using the rows and cells collections.
[color=blue]
> //look at each td cell value
> for( i=0; i<my_cell.childNodes.length; i++ )[/color]

You are running through the child nodes of the first cell, so you
should only encounter "a".

Try giving the table an id, and then:
---
var cells = document.getElementById("tableId").rows[0].cells;
for (var i=0; i<cells.length; i++) {
var cell = cells.item(i);
for (var chld = cell.firstChild;chld;chld=chld.nextSibiling) {
if (chld.nodeType == 3) { //text node
// something with nodeValue, e.g.,
alert(chld.nodeValue);
}
}
}
---
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: DOM problems

Lasse,

As always you have great answers. I modified the code you provided to look at
more than one row as follows:

var rows = document.getElementById("tableId").rows;
for (var j=0; j<rows.length; j++)
{
var cells = document.getElementById("tableId").rows[j].cells;
...............

Question, though, see below .......

Lasse Reichstein Nielsen wrote:
[color=blue]
> ......
>
> Try giving the table an id, and then:
> ---
> var cells = document.getElementById("tableId").rows[0].cells;
> for (var i=0; i<cells.length; i++) {
> var cell = cells.item(i);
> for (var chld = cell.firstChild;chld;chld=chld.nextSibiling) {[/color]

Lasse, what is going on here ?
[color=blue]
>
> if (chld.nodeType == 3) { //text node
> // something with nodeValue, e.g.,
> alert(chld.nodeValue);
> }
> }
> }
> ---
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
> 'Faith without judgement merely degrades the spirit divine.'[/color]

re: DOM problems

Michael Hill <hillmw@ram.lmtas.lmco.com> writes:
[color=blue]
> var rows = document.getElementById("tableId").rows;
> for (var j=0; j<rows.length; j++)
> {
> var cells = document.getElementById("tableId").rows[j].cells;[/color]

Or just:
var cells = rows[j].cells;
You already found the rows above.
[color=blue][color=green]
>> for (var chld = cell.firstChild;chld;chld=chld.nextSibiling) {[/color]
>
> Lasse, what is going on here ?[/color]

This loop is running through the child nodes of "cell". Instead
of doing it by number:
for (var i=0;i<cell.childNodes.length;i++) {
var chld = cell.childNodes[i];
...
}
It starts from the first child (cell.firstChild) and follows the
nextSibling references through the child nodes. It stops when
"chld" becomes a false value, which would be after the last node.
The last node has .nextSibling == null, and null converts to false.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: DOM problems

"Lasse Reichstein Nielsen" <lrn@hotpop.com> wrote in message
news:ekvn6k8t.fsf@hotpop.com...[color=blue]
> Michael Hill <hillmw@ram.lmtas.lmco.com> writes:
>[color=green]
> > var rows = document.getElementById("tableId").rows;
> > for (var j=0; j<rows.length; j++)
> > {
> > var cells = document.getElementById("tableId").rows[j].cells;[/color]
>[/color]

I would think then that I could remove the rows using:

var rows = document.getElementById("list").rows;
for ( var j=0; j<rows.length; j++ )
{
alert(rows[j].nodeName); // produces TR
var mytr = rows[j];
rows.removeChild(mytr);
}

re: DOM problems

"Michael Hill" <hillmw@charter.net> writes:
[color=blue]
> I would think then that I could remove the rows using:[/color]
[color=blue]
> var mytr = rows[j];
> rows.removeChild(mytr);[/color]

"rows" is a collection, not a node. What you want is
mytr.parentNode.removeChild(mytr);

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: DOM problems

"Lasse Reichstein Nielsen" <lrn@hotpop.com> wrote in message
news:oeuqgyjs.fsf@hotpop.com...[color=blue]
> "Michael Hill" <hillmw@charter.net> writes:
>[color=green]
> > I would think then that I could remove the rows using:[/color]
>[/color]
And I would think I could add rows ( of course this would only add 1 cell )
using:

var rows = document.getElementById("list").rows;
var mytr = rows;
// Creates separated nodes.
mycurrentRow=mytr.createElement("TR");
mycurrentCell=mytr.createElement("TD");
mycurrentText=mytr.createTextNode("a generic text");

// Appends each node following the structure.
mycurrentCell.appendChild(mycurrentText);
mycurrentRow.appendChild(mycurrentCell);
mytr.appendChild(mycurrentRow);