title: How do I access child rows of a thead element?
body: <p>I'm new to Javascript, so I'm not sure if I'm just not getting it, or if I've found a bug in... something, though I wouldn't know what. I have a script that is loading the results of a database query, then creating a graph (with the <a href="http://mbostock.github.com/d3/" rel="nofollow">d3</a> library), and then spitting out the raw data in a table. So far, this all works great.</p>
  
  <p>What I would like to do next is enable the toggling of individual data lines on the graph. Rather than make an Ajax call to go back to the server and get and parse the data again, I'd like to just read the data back from the table of raw numbers, and redraw the graph -- all client side. My problem is trying to get the column names values from the <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> elements. I can get this:</p>
  
  <pre><code>tbody = $("#raw_body");
  
  console.log(tbody);
  </code></pre>
  
  <p>And see in the Firebug console:</p>
  
  <pre><code>[tbody#raw_body]
  </code></pre>
  
  <p>In the console, I can click through the object and see that the [0] instance has "children", etc. However, every time I try something like this:</p>
  
  <pre><code>console.log(tbody[0].children[0]);
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>undefined
  </code></pre>
  
  <p>So how do I address rows of the table for assigning to Javascript objects, like this?</p>
  
  <pre><code>r = tbody[0].children[0];
  </code></pre>