Retrive Accurate Table Row Count

[vol7ron]

<table id="tbl1"> 
<thead> 
   <th>Col 1</th> 
   <th>Col 2</th> 
</thead> 
<tfoot> 
   <tr> 
      <td>Val 1</td> 
      <td>Val 2</td> 
   </tr> 
</tfoot> 
</table> 

var oTbl = getElementById('tbl1');
var rowsLength = oTbl.getElementsByTagName('tr').length;
alert(rowsLength);
//FF: 1
//IE: 2

Further investigation on the innerHTML of those rows shows that IE is grabbing the TH has a TR, whereas FF only grabs the ones in the TFOOT.

Any ideas to have them report the same? I rather not do something like "rowsLength - 1" if I can avoid it. This is code I hope to reuse having to check if THEAD exists is discouraged.

Thanks,
vol7ron

[vol7ron]

I guess the only way is to write better HTML:

<table id="tbl1"> 
<thead> 
   <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
   </tr> 
</thead> 
<tfoot> 
   <tr> 
      <td>Val 1</td> 
      <td>Val 2</td> 
   </tr> 
</tfoot> 
</table> 

var oTbl = getElementById('tbl1');
var rowsLength = oTbl.getElementsByTagName('tr').length;
alert(rowsLength);
//FF: 2
//IE: 2

[Fotiman]

I think you found the correct answer. <th> can only be included in a <tr> (it's invalid to do <thead><th>).

[vol7ron]

But it worked so brilliantly and for some reason, I think it validated. I wanted to do this for some specific reason that I can't remember. Maybe it was a CSS issue that I didn't want being applied to the THEAD TR? :/