Question

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 d3 library), and then spitting out the raw data in a table. So far, this all works great.

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 <thead> and <tbody> elements. I can get this:

tbody = $("#raw_body");

console.log(tbody);

And see in the Firebug console:

[tbody#raw_body]

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:

console.log(tbody[0].children[0]);

I get:

undefined

So how do I address rows of the table for assigning to Javascript objects, like this?

r = tbody[0].children[0];

Answer 1

table objects have a property called rows. You can use that instead to loop through the rows.

http://www.javascriptkit.com/domref/tableproperties.shtml

var tableObj = $("#myTable").get();
for(var i in tableObj.rows) {
    // Do something
    alert( tableObj.rows[i].innerHTML );
}

If you want to use jQuery:

var $rows = $("#raw_body tr");
$rows.each(function() {
    // Do something
    alert( $(this).html() );
});