Scraping single table from HTML using JavaScript

Question

Here's my problem: there's an internal issue tracking system that has a nice summary page (number of open issues broken down by developer, etc.) However, the compact summary table is surrounded by boilerplate cruft (navigational menu, search box, etc.) I'd like to embed the summary table on our team's page, but not the surrounding cruft. Using an <iframe> tag would be a trivial solution, if it were not for the cruft around the table I'm interested in. Luckily, the HTML table in question is well-delineated: it is defined with a regular <table> tag and it even has a unique id assigned to it. I was wondering if there was a simple JavaScript trick involving DOM manipulation that I could use to surgically extract the table I'm interested in within the iframe. That way, the report would always be up to date whenever somebody checks our team's homepage.

Answer 1

Something simple for you to expand on?

function scrapeTable(tableId)
  {
   var tables = document.getElementsByTagName("table");
   for (var i = 0; i < tables.length; i++)
   {
    if (tables[i].id == tableId)
    {
     alert("<table>" + tables[i].innerHTML + "</table>");
    }
   }
  }

Answer 2

If you use jQuery, you can pull the table code pretty easily. Now if the table contains little script blocks, things might get weird; similarly, if it relies on some stylesheets, make sure your destination page has those too.

Is the table surrounded by some sort of block-level element (a or something)? If so, then you can load the page (AJAX or hidden iframe), find the table by "id", traverse to the parent, and then move its html() value to your destination block. If there's no block-level parent suitable for that, then you can try reconstructing an empty table tag at your destination and then pull the html() from the source table and drop it there; however, things start getting a little weird sometimes because some browsers handle table layout in funny ways. Might work however.

Answer 3

Is the team and issue tracker on the same domain/address?

If it isn't then your probably going to have to modify the issue tracker to get the desired result. Most browsers wont let you modify/access across different domains for security reasons.

If they are on the same domain then you could probably use jQuery's load with a selector:

$("#destination").load("/path/to/table/ #tableid");