DOM problems

[Michael Hill]

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

[Lee]

Michael Hill said:

I am still having problems with the dom. blah ...
//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);
}
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.
This is not working. Any help is appreciated.

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

[Michael Hill]

>

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.

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);
}
}

[Eric Bohlman]

"Michael Hill" <hi****@charter.net> wrote in
news:vs************@corp.supernews.com:

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++ )
{
Here you're looping over each row. I thought you were only interested in
the first row?
var my_cell = my_row.getElementsByTagName("td").item(i);
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.
alert("number of td elements: " + my_cell.length);
It's always showing you "1", right?
for( j=0; j<my_cell.length; j++ )
{
Now you're looping over a single element.
myrownode = my_cell.item(j).nodeName;
alert(myrownode);
}
}

[Michael Hill]

Here you're looping over each row. I thought you were only interested in
the first row?

var my_cell = my_row.getElementsByTagName("td").item(i);

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

[Lasse Reichstein Nielsen]

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

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:
....
Accessing a table's cells is easier using the rows and cells collections.
//look at each td cell value
for( i=0; i<my_cell.childNodes.length; i++ )

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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Hill]

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:

......

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) {
Lasse, what is going on here ?

if (chld.nodeType == 3) { //text node
// something with nodeValue, e.g.,
alert(chld.nodeValue);
}
}
}
---
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

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

Or just:
var cells = rows[j].cells;
You already found the rows above.

for (var chld = cell.firstChild;chld;chld=chld.nextSibiling) {

Lasse, what is going on here ?

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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Hill]

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:ek**********@hotpop.com...

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

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

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);
}

[Lasse Reichstein Nielsen]

"Michael Hill" <hi****@charter.net> writes:

I would think then that I could remove the rows using: var mytr = rows[j];
rows.removeChild(mytr);

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

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

[Michael Hill]

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...

"Michael Hill" <hi****@charter.net> writes:

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

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);