JavaScript - Scrape HTML Table Into Its JavaScript Data-Object Representative

Posted at

sometimes you'll want to tweak an existing page, by injecting a javascript bookmark,
user-script (greasemonkey for example) or even plain console eval.

parsing a HTML table into a data-table representation can provide easier access to data and DOM-elements (for style modifications, for example..)

for the given html example:

# name title
1 Foo1 Bar1
2 Foo2 Bar2
3 Foo3 Bar3

var headers, rows, table;

headers ='th'),function(element){
return element.innerText
.replace("?", "").replace("?","");

rows = document.querySelectorAll('tr[class*="bz_bugitem"');

table =, function(row){
columns_as_array = row.getElementsByTagName("td"),
columns_as_object = {},
headers_len = headers.length

for(i=0; i<headers_len; i+=1){ //store by column order (zero-based-index)
columns_as_object[ i ] = columns_as_array[i]; //store by column order (zero-based-index)
columns_as_object[ "length" ] = columns_as_array.length; //fake "length" attribute just like it was a real array, the top X elements are "by number"

for(i=0; i<headers_len; i+=1){ //map row array to row object - store by column title
columns_as_object[ headers[i] ] = columns_as_array[i];

return columns_as_object;