I'm getting the weirdest issues with Javascript in Firefox today.

I'm trying to manipulate some table rows, but .getElementsByTagName("tr"); is pulling back junk.

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i in tableRows) {
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

The puzzling part of course is my temporary hack to fix the error. For some reason .getElementsByTagName("tr") is pulling back some functions also.

Incidently, the alert above goes something like this "TR TR TR TR undefined undefined undefined".

The code I wanted was something like this

dynamicTable.bodyRows = dynamicTable.tableBody.getElementsByTagName("tr");

But then bodyrows does not contain just <tr> elements, it has the aforementioned junk in it.

Any thoughts?

EDIT: If I just use the second block of code, I get a list 24 elements long on a table that has 21 table rows (tr elements) . The first block of code is just a hack that fixes the problem.

If I change the alert to alert(row) I get:

[object HTMLTableRowElement]
...

function item() {
    [native code]
}

21

function namedItem() {
    [native code]
}

I'm getting the weirdest issues with Javascript in Firefox today.

I'm trying to manipulate some table rows, but .getElementsByTagName("tr"); is pulling back junk.

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i in tableRows) {
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

The puzzling part of course is my temporary hack to fix the error. For some reason .getElementsByTagName("tr") is pulling back some functions also.

Incidently, the alert above goes something like this "TR TR TR TR undefined undefined undefined".

The code I wanted was something like this

dynamicTable.bodyRows = dynamicTable.tableBody.getElementsByTagName("tr");

But then bodyrows does not contain just <tr> elements, it has the aforementioned junk in it.

Any thoughts?

EDIT: If I just use the second block of code, I get a list 24 elements long on a table that has 21 table rows (tr elements) . The first block of code is just a hack that fixes the problem.

If I change the alert to alert(row) I get:

[object HTMLTableRowElement]
...

function item() {
    [native code]
}

21

function namedItem() {
    [native code]
}

• javascript
• html
• getelementsbytagname

Share Improve this question Follow edited Jan 13, 2012 at 15:16 Josh Darnell 11.5k99 gold badges3939 silver badges6666 bronze badges asked Jun 16, 2010 at 18:37 Sheldon RossSheldon Ross 5,54477 gold badges3333 silver badges3737 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The for-in statement is enumerating also the item and namedItem methods present on the HTMLCollection that getElementsByTagName returns.

To iterate over array-like elements like DOM Collections, a simple sequential loop is always remend, the for...in statement is meant to be used to enumerate object properties.

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i = 0, n = tableRows.length; i < n; i++) { // <---- simple for loop
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

You shouldn't use for..in with array-like objects because:

• The order of iteration is not guaranteed, the array indexes may not visited in the numeric order.
• Inherited properties are also enumerated (This can be another source of problems).

Remended article:

• Enumeration VS Iteration