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.

 

[Eric Bohlman]

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").item(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.

 

[Lasse Reichstein Nielsen]

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

 

[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 .......

......

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 ?

 

[Lasse Reichstein Nielsen]

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.

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;
...
}
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]

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