Friday, January 22, 2010

jQuery - How screen scrape a table from another web page

Lately at work we have needed to add additional content to our SharePoint Portal, one of the ways to implement quick and easy functionality is to use a Content Editor Webpart and some jquery. Everyday I find new and interesting ways to utilize this amazing javascript library to automate and execute redundant and boring tasks, thereby making end users lives easier and making myself into something of hometown hero.

This post will demonstrate using jquery to retrieve an html table from a weather website and pull it into your portal page. You will need to have the small jquery.js library uploaded into a shared top level site, there is nothing to install, just download the jquery library file and put it into a document library, as you will need to reference the path to the file when using jquery on your pages.

Also create a text file and add the following script to it,



save it as a .txt file and upload it to the same document library your jquery.js file is in.

Now go to the page you want the scraped item to show up on and put your page into Edit Mode and insert a Content Editor Webpart, once it is on the page then you will need to edit the properties and have it pointed to our text file that contains this script, this is way faster to troubleshoot and debug, no more having to save the page to see your changes, then put it back into edit mode to adjust the script.
This is so simple and yet so powerful! First I am looking to extract a table from the target webpage, so we use the html tag #table, (you could target any html element), in this case the target web page table tags does not contain IDs which would make it extremely easy to find the specific table I need, so I need to use the nth-child() to grab the table I want. You may have to experiment to find which table you want, just keep changing the number. Once you have your html element you can then use jquery to dress it up anyway you want or perform additional functions.