[SOLVED] traversing table by DOM

[janroald]

html :
  <table id="data" border="1">
  <tr><td></td></tr>
  <tr><td><table><tr><td></td></tr></table></td></tr>
  <tr><td></td></tr>
  </table>

js :
  mytable     = document.getElementById('data');
  mytablebody = mytable.getElementsByTagName('tbody')[0];
  myrows      = mytablebody.getElementsByTagName('tr');
  alert(myrows.length); // 

 

This way myrows contains all tr's including the row in the inner table.

Is there a good way of getting only rows from the inner table?

 

[fenway]

I'm sure there's a way to do this via nodes... but why not just ID the inner table and start there?

[janroald]

Sorry, I wrote wrong. It is of course the outer table rows im interested in, not the inner.

The table layout above is just a constructed example.

The actual table may have one or more nested tables inside. I need to traverse only the outer table rows.

[fenway]

I'd still suggest id-ing the rows, then... otherwise, you'll have to check each TR to see if there are any tables "inside" with getElementsByTagName for each row.

[janroald]

That solution won't do it for me, but thanks for your try, fenway.

The whole point here is to go through the entire table without referring to anything but the table id.

 

I'll look for a good way to get the rows without recursively adding inner table rows, and post it here if i find it.

[fenway]

Actually, maybe there's a way to check parentElement or parentNode, or something like that, and see if it's an "outer" table...?

[janroald]

Yes, by building the myrows array through a loop, checking parentthis&childthat, I probably would get the result i need. :-)

 

But as a stubborn perfectionist I'm required to dig deeper through the manuals to find the more elegant way. Lucky me... lol

[ozfred]

html :
  <table id="data" border="1">
  <tr><td></td></tr>
  <tr><td><table><tr><td></td></tr></table></td></tr>
  <tr><td></td></tr>
  </table>

js :
  mytable     = document.getElementById('data');
  mytablebody = mytable.getElementsByTagName('tbody')[0];
  myrows      = mytablebody.getElementsByTagName('tr');
  alert(myrows.length); // 

 

This way myrows contains all tr's including the row in the inner table.

Is there a good way of getting only rows from the inner table?

 

You meant only the "outer" rows: every table has a rows attribute that returns a collection of that table's rows, so:

 

  var theRows = document.getElementById('data').rows;

 

Tough, eh?

 

Try the W3C site and read the W3C DOM 2 HTML spec, or use the Mozilla DOM reference:

 

W3C DOM 2 HTML Specification:

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/ >

 

Mozilla DOM reference:

<URL: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference >

 

--

Fred

Javascript FAQ: <URL: http://www.jibbering.com/faq/ >

 

 

[fenway]

No kidding... a rows collection... who knew...

[janroald]

Thanks, ozfred :-)

You really made us look bad now ;-)

 

Think it's time for a second reading of the manuals. Might save a lot of trouble and headache...

 

No kidding... a rows collection... who knew...