By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,568 Members | 1,196 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,568 IT Pros & Developers. It's quick & easy.

DOM problems

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
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.

Jul 20 '05 #2

P: n/a
>
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);
}
}
Jul 20 '05 #3

P: n/a
"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);
}
}

Jul 20 '05 #4

P: n/a
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
Jul 20 '05 #5

P: n/a
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.'
Jul 20 '05 #6

P: n/a
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.'


Jul 20 '05 #7

P: n/a
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.'
Jul 20 '05 #8

P: n/a

"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);
}
Jul 20 '05 #9

P: n/a
"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.'
Jul 20 '05 #10

P: n/a

"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);
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.