Table rows collection help
 

This works in Firefox, but not in IE.

for (var i in appraisertable.rows) {
var row = appraisertable.rows[i];
alert(row.id);
}

IE displays "undefined" and gives the error "id is null or not an
object." Like I said before, Firefox works great. What's my problem
here?

Re: Table rows collection help
 

Trevor wrote:
> This works in Firefox, but not in IE.
>
> for (var i in appraisertable.rows) {
> var row = appraisertable.rows[i];
> alert(row.id);
> }
>
> IE displays "undefined" and gives the error "id is null or not an
> object." Like I said before, Firefox works great. What's my problem
> here?

Guessing that appraisertable is a table or a tableSection element, then
appraisertable.rows should return a collection. A for..in statement
will iterate over the enumerable properties, if you look at what is
returned by your code, Firefox goes through the indexes first, then the
other properties (length, item, namedItem). IE returns the length
first, so in the first iteration, 'row' is set to the value of the
length property which is a number. Number objects don't have an id
property (unless you've given them one) so it returns undefined.
Firefox does too, but after returning the indexes. Try the following:

<table id="tableA">
<tr id="one"><td>one</td></tr>
<tr id="two"><td>two</td></tr>
<tr id="three"><td>three</td></tr>
</table>

<script type="text/javascript">
function blah(){
var r = document.getElementById('tableA').rows;
for (i in r){
alert( 'Property: ' + i + '\n'
+ 'Type: ' + (typeof i) + '\n'
+ 'Value: ' + r[i]);
}
}
blah();
</script>

In any case, there seems no point in using for..in - the usual reason
is for sparse arrays, but that should never happen with a rows
collection (they are 'live' and self-adjusting). Use:

var row, rows = appraisertable.rows;
for (var i=0, len=rows.length; i<len; i++) {
row = rows[i];
if (row.id) alert(row.id);
}

--
Rob

Re: Table rows collection help
 

Thank you so much! That's precisely what I needed to know.

RobG wrote:
> Trevor wrote:
> > This works in Firefox, but not in IE.
> >
> > for (var i in appraisertable.rows) {
> > var row = appraisertable.rows[i];
> > alert(row.id);
> > }
> >
> > IE displays "undefined" and gives the error "id is null or not an
> > object." Like I said before, Firefox works great. What's my problem
> > here?
>
> Guessing that appraisertable is a table or a tableSection element, then
> appraisertable.rows should return a collection. A for..in statement
> will iterate over the enumerable properties, if you look at what is
> returned by your code, Firefox goes through the indexes first, then the
> other properties (length, item, namedItem). IE returns the length
> first, so in the first iteration, 'row' is set to the value of the
> length property which is a number. Number objects don't have an id
> property (unless you've given them one) so it returns undefined.
> Firefox does too, but after returning the indexes. Try the following:
>
> <table id="tableA">
> <tr id="one"><td>one</td></tr>
> <tr id="two"><td>two</td></tr>
> <tr id="three"><td>three</td></tr>
> </table>
>
> <script type="text/javascript">
> function blah(){
> var r = document.getElementById('tableA').rows;
> for (i in r){
> alert( 'Property: ' + i + '\n'
> + 'Type: ' + (typeof i) + '\n'
> + 'Value: ' + r[i]);
> }
> }
> blah();
> </script>
>
> In any case, there seems no point in using for..in - the usual reason
> is for sparse arrays, but that should never happen with a rows
> collection (they are 'live' and self-adjusting). Use:
>
> var row, rows = appraisertable.rows;
> for (var i=0, len=rows.length; i<len; i++) {
> row = rows[i];
> if (row.id) alert(row.id);
> }
>
> --
> Rob